<!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">
<title></title>
<style>
label.error{
color:red;
}
input.error { border: 1px solid red; }
input.valid { border: 1px solid green; }
</style>
</head>
<body>
<form action="" id="test">
<p><input type="text" placeholder="用户名" name="username" id=""></p>
<p><input type="password" placeholder="密码" name="password" id=""></p>
<p><input type="password" placeholder="重复密码" name="repassword" id=""></p>
<p><input type="submit" value="提交"></p>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="./messages_zh.min.js"></script>
<script>
// jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {
// var length = value.length;
// for (var i = 0; i < value.length; i++) {
// if (value.charCodeAt(i) > 127) {
// length++;
// }
// }
// return this.optional(element) || (length >= param[0] && length <= param[1]);
// }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); //自定义验证方法
// $.validator.setDefaults({}); //对所有表单设置
$.validator.addMethod("imUserName", function (value, element) {
return this.optional(element) || /^(?![0-9])[a-z0-9_]{3,30}$/.test(value);
}, "用户名只可包含小写字母、数字、_，且不能以数字开头");
$("#test").validate({
// debug: true, //进行调试模式（表单不提交）
// submitHandler: function () {
// // alert("提交事件!");
// }
// errorPlacement: function (error, element) {
// error.appendTo(element.parent());
// } //更改错误信息显示的位置
// ignore: ".ignore" //忽略某些元素不验证
// errorClass: "error", //指定错误提示的 css 类名，默认error
// errorElement: "label", //用什么标签标记错误，默认是 label
// errorLabelContainer: $("#signupForm div.error"), //把错误信息统一放在一个容器里面
// wrapper : "li", //用什么标签再把上边的 errorELement 包起来。
// success：String,Callback, //如果跟一个字符串，会当作一个 css 类，如果是函数，表示验证后的动作。
// groups: {
// username: "fname lname"
// },
// errorPlacement:function, //对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里
// OnSubmit：类型 Boolean，默认 true，指定是否提交时验证
// onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证
// onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证
// onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）
// focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点
// focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）
// showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素
// errorPlacement：跟一个函数，可以自定义错误放到哪里
// highlight：可以给未通过验证的元素加效果、闪烁等
success: "valid",
rules: {
username: {
required: true,
rangelength: [4, 10],
imUserName: true,
remote: {
url: "./user.php", //后台处理程序
type: "get", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function () {
return $("#username").val();
}
}
}, //异步验证
},
password: {
required: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "#password",
// required(dependency-expression) //必填元素依赖于表达式的结果
// required(dependency-callback) //必填元素依赖于回调函数的结果
// minlength() //设置最小长度
// maxlength() //设置最大长度
// min() //设置最小值
// max() //设置最大值
// range() //设置值的范围
// email() //验证电子邮箱格式
// url() //验证 URL 格式
// date() //验证日期格式
// dateISO() //验证 ISO 类型的日期格式
// dateDE() //验证德式的日期格式
// number() //验证十进制数字
// digits() //验证整数
// creditcard() //验证信用卡号
// accept(extension) //验证相同后缀名的字符串
// equalTo(other) //验证两个输入框的内容是否相同
// phoneUS() //验证美式的电话号码
}
},
messages: {
username: {
required: "请输入用户名",
remote: "用户名已存在"
},
password: {
required: "请输入密码",
minlength: "密码至少六位"
}
}
});
</script>
</body>
</html>
网友评论