校验规则
- 用户只能包含字母和数字
- 密码必须包含大小写字母和数字
- 密码长度不能小于 5 个字母
代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/localization/messages_zh.min.js"></script>
<style>
.error {
color: red;
}
</style>
</head>
<script>
$.validator.setDefaults({
submitHandler: function () {
alert("提交!");
debug: true;
}
});
$().ready(function () {
jQuery.validator.addMethod("isMobilePhone", function (value, element) {
var licenceRegNum =
/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|4|5|6|7|8|9])\d{8}/;
var flag = false;
if (licenceRegNum.test(value)) {
flag = true;
}
return this.optional(element) || flag;
}, "请输入正确的手机号");
jQuery.validator.addMethod("isUserName", function (value, element) {
var licenceRegNum = /^[\w]+)/;
var flag = false;
if (licenceRegNum.test(value)) {
flag = true;
}
return this.optional(element) || flag;
}, "用户只能包含字母和数字");
jQuery.validator.addMethod("isPassword", function (value, element) {
var licenceRegNum = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}/;
var flag = false;
if (licenceRegNum.test(value)) {
flag = true;
}
return this.optional(element) || flag;
}, "密码必须包含大小写字母和数字");
$("#signupForm").validate({
rules: {
username: {
required: true,
isUserName: true,
minlength: 2
},
password: {
required: true,
minlength: 5,
isPassword: true
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
mobile_phone: {
required: true,
isMobilePhone: true
}
},
messages: {
username: {
required: "请输入用户名",
isUserName: "用户名只能包含字母和数字",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
isPassword: "密码必须包含大小写字母和数字"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
mobile_phone: {
required: "请输入手机号",
isMobilePhone: "请输入正确的手机号"
}
}
})
});
</script>
<body>
<div class="container-fluid" style="width: 80vw;margin: 10vh 20vw;">
<div class="row-fluid">
<div class="span12">
<form id="signupForm" class="form-horizontal" method="get" action="">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="confirm_password" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirm_password" name="confirm_password"
placeholder="确认密码">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="mobile_phone" class="col-sm-2 control-label">手机号</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="mobile_phone" name="mobile_phone"
placeholder="手机号">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>