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>