jQuery 簡單驗證

時間 2019-11-12

標籤 jquery 簡單驗證欄目 JQuery 简体版

原文原文鏈接

<%@ page language="java" contentType="text/html; charset=UTF-8"javascript

pageEncoding="UTF-8"%>html

<%java

String path = request.getContextPath();jquery

String basePath = request.getScheme() + "://"jsp

+ request.getServerName() + ":" + request.getServerPort()post

+ path + "/";ui

%>spa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">orm

<html>htm

<head>

<title>My JSP 'register.jsp' starting page</title>

//用戶名惟一驗證

function checkName(){

var userName = $("#userName").val();

if(userName != '')

{

if(!userName.match(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/))

{

$("#nameResult").html("<font color='red'>用戶名必須是數字、字母或者下劃線</font>");

return false;

}else{

$.post("isExistName.do",

{userName:$("#userName").val()

function(data){

if(data == "yes"){

$("#nameResult").html("<font color='red'>√</font>");

return true;

}else{

$("#nameResult").html("<font color='red'>用戶名已被佔用，請從新輸入</font>");

return false;

}

});

}

}else{

$("#nameResult").html("<font color='red'>用戶名不能爲空</font>");

return false;

}

//email惟一驗證

function checkEmail(){

var email = $("#email").val();

if(email != '')

{

if (!email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/))

{

$("#emailResult").html("<font color='red'>郵箱格式不正確！請從新輸入！</font>");

return false;

}else{

$.post("isExistEmail.do",

{email:$("#email").val()

function(data){

if(data == "yes"){

$("#emailResult").html("<font color='red'>√</font>");

return true;

}else{

$("#emailResult").html("<font color='red'>郵箱已被佔用，請從新輸入</font>");

return false;

}

});

}

}else{

$("#emailResult").html("<font color='red'>郵箱不能爲空</font>");

return false;

}

//密碼爲空驗證

function checkPass(){

var password = $("#password").val();

if(password == ''){

$("#passResult").html("<font color='red'>密碼不能爲空</font>");

return false;

}else if(password.length < 6 || password.length > 12)

{

$("#passResult").html("<font color='red'>請輸入6到12位的密碼</font>");

return false;

}else{

$("#passResult").html("<font color='red'>√</font>");

return true;

}

//密碼第二次輸入驗證

function checkRepass(){

var password = $("#password").val();

var repassword = $("#repassword").val();

if(password != ''&& repassword !='')

{

if(password == repassword){

$("#repassResult").html("<font color='red'>√</font>");

return true;

}else{

$("#repassResult").html("<font color='red'>密碼不一致，請從新輸入</font>");

return false;

}

}else{

$("#repassResult").html("<font color='red'>確認密碼不能爲空</font>");

return false;

}

//地址不能爲空

function checkAddress(){

var address = $("#address").val();

if($.trim(address).length<1){

$("#addResult").html("<font color='red'>地址不能爲空</font>");

return false;

}else {

$("#addResult").html("<font color='red'>√</font>");

return true;

}

function checkAll(){

if(checkName() == true && checkEmail() == true && checkPass() == true

&& checkRepass() == true && checkAddress() == true)

{

return true;

}

else{

alert("表單輸入有誤，請仔細檢查");

return false;

}

</script>

</head>

<body>

<br>

<table>

<tr>

<td><input id="userName" name="userName" type="text" onblur="checkName()"/> <span

id="nameResult"></span></td>

</tr>

<tr>

<td><input id="password" name="password" type="password" onblur="checkPass()"/> <span

id="passResult"></span></td>

</tr>

<tr>

</tr>

<tr>

<td><input id="email" name="email" type="text" onblur="checkEmail()"/><span

id="emailResult"></span></td>

</tr>

<tr>

<td><input id="address" name="address" type="text"

onblur="checkAddress()" /> <span id="addResult"></span></td>

</tr>

<tr>

</tr>

</table>

</form>

</center>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。