JQuery Validate插件教程: https://www.cnblogs.com/linjiqin/p/3431835.html
demo.html:
<!DOCTYPE html>
<html>
<head></head>
<title>会员注册</title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- 引入表单校验jquery插件 -->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<style>
/* 可以自定义错误提示信息的样式 */
label.error{
color:red
}
</style>
<script type="text/javascript">
//自定义校验规则
$.validator.addMethod(
//规则的名称
"checkUsername",
//校验的函数
function(value,element,params){
//定义一个标志
var flag = false;
//value:输入的内容
//element:被校验的元素对象
//params:规则对应的参数值
//目的:对输入的username进行ajax校验
$.ajax({
"async":false, // 同步的方式请求数据
"url":"www.xxx.com/checkUsername",
"data":{"username":value},
"type":"POST",
"dataType":"json",
"success":function(data){
flag = data.isExist;
}
});
//返回false代表该校验器不通过
return !flag;
}
);
$(function(){
// 表单验证
$("#myform").validate({
rules:{
"username":{
"required":true,
"checkUsername":true
},
"password":{
"required":true,
"rangelength":[6,12]
},
"repassword":{
"required":true,
"rangelength":[6,12],
"equalTo":"#password"
},
"email":{
"required":true,
"email":true
},
"sex":{
"required":true
}
},
messages:{
"username":{
"required":"用户名不能为空",
"checkUsername":"用户名已存在"
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位"
},
"repassword":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"两次密码不一致"
},
"email":{
"required":"邮箱不能为空",
"email":"邮箱格式不正确"
}
}
});
});
</script>
</head>
<body>
<div >
<font>会员注册</font>
<form id="myform" action="/register" method="post" >
<div class="form-group">
<label for="username" >用户名</label>
<div>
<input type="text" id="username" name="username"
placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" >密码</label>
<div class="col-sm-6">
<input type="password" id="password" name="password"
placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="confirmpwd" >确认密码</label>
<div class="col-sm-6">
<input type="password" id="confirmpwd" name="repassword"
placeholder="请输入确认密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" >Email</label>
<div class="col-sm-6">
<input type="email" id="inputEmail3" name="email"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="usercaption" >姓名</label>
<div class="col-sm-6">
<input type="text" id="usercaption" name="name"
placeholder="请输入姓名">
</div>
</div>
<div class="form-group opt">
<label for="inlineRadio1" >性别</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="sex" id="sex1" value="male" >男
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="sex2" value="female">女
</label>
<label class="error" for="sex" style="display:none ">您没有第三种选择</label> <!-- 可以手动指定校验提示信息的位置。默认隐藏,校验不通过会自动显示 -->
</div>
</div>
<div class="form-group">
<label for="date">出生日期</label>
<div>
<input type="date" name="birthday">
</div>
</div>
<div class="form-group">
<label for="date">验证码</label>
<div>
<input type="text" name="checkCode">
</div>
<div >
<img src="./image/captcha.jhtml" />
</div>
</div>
<div class="form-group">
<div >
<input type="submit" width="100" value="注册" name="submit">
</div>
</div>
</form>
</div>
</body>
</html>