jQuery 表单验证插件调用流程总结
1. HTML 表单元素定义
在 stepOrdinary.html#L171-172 中定义输入框：
<input type="text" autocomplete="off" name="nickname" placeholder="请输入姓名" id="nickname">
- name="nickname" ：用于验证规则匹配
- id="nickname" ：用于 jQuery 选择器定位
2. 引入验证插件
在 HTML 中引入必要的 jQuery 验证插件：
<script src="./memberLogin_files/jquery.validate.js"></script>
<script src="./memberLogin_files/additional-methods.js"></script>
<script src="./memberLogin_files/jquery.validate.messages_cn.js"></script>
3. 初始化验证
在 yuzhuce2.step1.js#L6 中调用初始化方法：
initPage: function() {
var self = this;
self.form = $('#mainForm');
self.initValidateFormData(self); // 初始化表单验证
}
4. 自定义验证方法
在 yuzhuce2.step1.js#L19-27 中添加自定义验证规则：
$.validator.addMethod('nickname', function(value, element) {
var nicknameRegex = /^[\u4e00-\u9fa5a-zA-Z0-9]{3,}$/;
if(value.indexOf('null') === -1 || value.indexOf('undefined') === -1) {
return this.optional(element) || nicknameRegex.test(value);
}else{
return false;
}
}, '昵称不能包含空格/特殊字符，且长度至少3个字符');
5. 定义验证规则对象
在 yuzhuce2.step1.js#L84-88 中定义验证规则：
rules['nickname'] = {
required: true, // 必填
minlength: 3, // 最小长度3
nickname: true // 使用自定义的nickname验证方法
};
这里解释你不懂的部分：
- rules['nickname'] ：这里的 'nickname' 对应 HTML 中输入框的 name="nickname" 属性
- required: true ：表示该字段必填
- minlength: 3 ：表示最小长度为3个字符
- nickname: true ：表示启用第4步中自定义的 nickname 验证方法
6. 定义错误提示信息
在 yuzhuce2.step1.js#L43-47 中定义错误提示：
messages: {
nickname: {
required: '请输入姓名',
minlength: '姓名至少3个字符',
nickname: '请输入有效的姓名'
}
}
7. 实时验证配置
在 yuzhuce2.step1.js#L69-77 中配置实时验证：
onkeyup: function(element) {
$(element).valid(); // 键盘抬起时验证
},
onfocusout: function(element) {
$(element).valid(); // 失去焦点时验证
},
onblur: function(element) {
$(element).valid(); // 模糊时验证
}
8. 激活验证
最后调用 validate() 方法激活验证：
self.form.validate({
rules: rules,
messages: messages,
onkeyup: ...,
onfocusout: ...
});
核心要点
1. name 属性是关键 ：验证规则通过 name 属性匹配表单元素
2. 规则对象结构 ： rules['字段名'] = { 规则名: 值 }
3. 自定义方法 ：通过 $.validator.addMethod() 添加自定义验证
4. 实时验证 ：通过 onkeyup 、 onfocusout 等事件实现实时反馈
5. 错误提示 ： messages 对象与 rules 对象结构对应
这样整个表单验证系统就能工作了，当用户输入时会实时验证并显示相应的错误提示。
