前端基础 - JQuery 简单的表单校验器

JQuery 简单的表单校验器 需求及导入步骤

• 导入jquery.js文件
• 导入jquery-validate.js文件（jquery的校验器插件）
• 导入messages_zh.js国际化文件
• 对表单进行校验

在页面加载成功后获取表单对象.validate({
    				rules:{},     //校验规则
    				messages:{}   //自定义提示信息
    			})

rules写法：

要校验的name属性：{
					校验器1：取值，
					校验器2：取值
				}
注意：多个校验规则之间  使用,分割

message写法：

要校验的name属性：{
					校验器1："自定义提示信息1"，
					校验器2："自定义提示信息2"
			}

校验器： required true/false 必填校验 number true/false 数字校验 min 数字 最小值 max 数字 最大值 range 数值区间 [最小值,最大值] minLength|maxLength|rangLength 最小值|最大值|长度区间 email: email 邮箱校验 @ 1@x equalTo: jquery对象 重复性校验

案例:

效果图：

代码：

	
		
		
	
	
	
	
	
		$(function() {
			//获取要校验的表单
			$("#formid").validate({
				rules: {
					username: {
						required: true
					},
					password: {
						required: true,
						number: true
					},
					repassword: {
						equalTo: $("#password")
					},
					email: {
						email: email
					}
				},
				messages: {
					username: {
						required: "用户名不能为空"
					},
					password: {
						required: "密码不能为空",
						number: "密码必须为数字"
					},
					repassword: {
						equalTo: "两次密码必须一致"
					},
					email: {
						email: "请输入格式为：*@*  邮箱"
					}
				}
			})
		})
	
	

	

	
		
			
				
					会员注册USER REGISTER
				
				
					用户名:
					
				
				
					密码:
					
				
				
					确认密码:
					
				
				
					Email:
					
				
				
					姓名:
					
				
				
					性别:
					
						 男
						女
						
					

				
				
					出生日期
					
						

					
				
				
					验证码