校验用户名、密码、密码一直性。
<style>
.error {
color: red
}
.success {
color: green
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("#username").blur(function() {
//获取username值
var username_v = $("#username").val();
//去掉两端空格
username_v = $.trim(username_v);
//对值进行非空校验
if(username_v == "") {
//为空
$(this).next("span").text("用户名不能为空").removeClass().addClass("error");
} else {
alert(123);
//这则表达式进行中文校验
var username_reg = /[\u4e00-\u9fa5]/;
var flag = username_reg.test(username_v);
if(flag) {
//正则表达式校验正确(含有中文)
$(this).next("span").text("用户名不能含有中文").removeClass().addClass("error");
} else {
//用户名正确（查重）
$.post("${pageContext.request.contextPath }/UserCheckServlet", {
username: username_v
}, function(data) {
if(data == "true") {
$("#username").next("span").text("用户名已存在").removeClass().addClass("error");
} else {
$("#username").next("span").text("用户名可用").removeClass().addClass("success");
}
});
}
}
});
$("#password").blur(function(){
//获取文本框中信息
var password_v=$.trim($(this).val());
//判断文本框的信息（是否为空）
if(password_v==""){
$(this).next("span").text("密码不能为空").removeClass().addClass("error");
}else{
//判断密码强度是否符合
var password_reg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
if(password_reg.test(password_v)){
$(this).next("span").text("密码合格").removeClass().addClass("success");
}else{
$(this).next("span").text("密码强度不够，密码必须由大小写字母、数字组成8-10位，不能包含中文和特殊字符！").removeClass().addClass("error");
}
}
});
$("#repassword").blur(function(){
//获取文本框中信息
var repassword_v=$.trim($(this).val());
//判断文本框的信息（是否为空）
if(repassword_v==""){
$(this).next("span").text("密码不能为空").removeClass().addClass("error");
}else{
//判断密码强度是否符合
var password_reg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
if(password_reg.test(repassword_v)){
var password_v=$.trim($("#password").val());
if(repassword_v!=password_v){
$(this).next("span").text("密码不一致").removeClass().addClass("error");
}else{
$(this).next("span").text("密码合格").removeClass().addClass("success");
}
}else{
$(this).next("span").text("密码强度不够，密码必须由大小写字母、数字组成8-10位，不能包含中文和特殊字符！").removeClass().addClass("error");
}
}
});
})
</script>
使用jquery插件来进行表单校验
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
.error {
color: red;
}
</style>
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
<script>
$(function() {
$("form")
.validate(
{
rules : {
username : {
required : true,
minlength : 6,
maxlength : 18,
username_reg : true,
remote : {
url : "${pageContext.request.contextPath}/UserCheckServlet", //后台处理程序
type : "post", //数据发送方式
data : { //要传递的数据
username : function() {
return $("#username").val();
}
}
}
},
password : {
required : true,
password_reg : true
},
repassword : {
required : true,
password_reg : true,
equalTo: "#password"
},
tel : {
required : true,
tel_reg : true
},
IDCard:{
required:true,
IDCard_reg:true
},
email:{
required:true,
email:true
}
},
messages : {
username : {
required : "请输入用户名",
username_reg : "用户名不能为中文"
},
password : {
required : "密码不能为空",
password_reg : "密码必须是大小写和数字的组合,长度8-10位"
},
repassword : {
required : "不能为空",
password_reg : "密码必须是大小写和数字的组合,长度8-10位",
equealTo:"密码不一致"
},
tel : {
required : "电话号码不能为空",
tel_reg : "格式不正确"
},
IDCard:{
required:"身份证号不能为空",
IDCard_reg:"身份证号码格式不正确(15 或 18位)"
},
email:{
required:"邮箱不能为空",
}
}
});
jQuery.validator.addMethod("username_reg", function(value, element) {
var username = /[\u4e00-\u9fa5]/;
return this.optional(element) || !(username.test(value));
});
jQuery.validator.addMethod("password_reg", function(value, element) {
var password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
return this.optional(element) || (password.test(value));
});
jQuery.validator.addMethod("tel_reg", function(value, element) {
var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
return this.optional(element) || (tel.test(value));
});
jQuery.validator.addMethod("IDCard_reg", function(value, element) {
var idcard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
var idcard1 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
return this.optional(element) || (idcard.test(value))||(idcard1.test(value));
});
jQuery.validator.addMethod("email_reg", function(value, element) {
var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
return this.optional(element) || (tel.test(value));
});
});
</script>
</head>
<body>
<form action="#" method="post" id="form1">
<table border="1">
<tr>
<td align="right">用戶名:</td>
<td><input type="text" id="username" name="username" /><span></span>
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="text" id="password" name="password" /> <span></span>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="text" id="repassword" name="repassword" /> <span></span></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>男<input type="radio" name="sex" value="man"
checked="checked" /> 女 <input type="radio" name="sex"
value="woman" />
</td>
</tr>
<tr>
<td align="right">手机号码:</td>
<td><input type="text" id="tel" name="tel" /> <span></span></td>
</tr>
<tr>
<td align="right">身份证:</td>
<td><input type="text" id="IDCard" name="IDCard" /> <span></span></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交" /> <input
type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
