jQuery Validate 校验框架学习总结

最新推荐文章于 2025-06-09 20:04:13 发布

原创最新推荐文章于 2025-06-09 20:04:13 发布 · 784 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #jquery

web前端技术专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用jQueryValidate插件简化客户端表单验证过程，包括添加必要的JS文件、编写校验规则和HTML元素命名匹配。通过设置默认验证参数、自定义校验方法和异步验证功能，实现灵活的表单验证逻辑。

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

http://www.w3cschool.cc/jquery/jquery-plugin-validate.html w3cschool学习资料。

其实一共可分为3个步骤：

1.添加两个js

2.撰写校验文件下面是我的校验文件

包括异步检测实例和自定义校验规则实例

$.validator.setDefaults({
	submitHandler: function(form) {
		// only for demo purposes
		alert("submitted!");
		//form.ajaxSubmit();
	}
});

//验证是否是手机
$.validator.addMethod("isMobile", function(value, element) {         
    var length = value.length;     
    var mobile = /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/;     
    return this.optional(element) || (length == 11 && mobile.test(value));         
}, "请正确填写您的手机号码"); 


//验证数据库是否存在
$.validator.addMethod("checkUserExist",function(value,element){
    var user = value;
    $.ajax({
        type:"POST",
        async:false, 
        url:"checkUserAction",
        data:"username="+user,
        success:function(response){
            if(response){
                res = true;
            }else{
                res = false;
            }
        }
    });
    return res;
},"<font color='#E47068'>用户名已存在</font>");


$().ready(function() {
	
	//alert("dsdsd");
	// validate the form when it is submitted
	var validator = $("#registerNormal").validate(
			
		{
		errorPlacement: function(error, element) {
			// Append error within linked label
			//alert(error)
			$( element ).closest( "form" ).find( "#dd" ).html("");
			$( element ).closest( "form" ).find( "#dd" ).append( error );
		},
		errorElement: "span",
		onkeyup:false,
		rules:{
			linknum:{
				required:true,
				isMobile:true
			},
			username:{
				required:true,
				minlength:4,
				maxlength:16,
				checkUserExist:true,
				
			},
			password:{
				required:true,
				minlength:4,
				maxlength:16,
			},
			passwordAgain:{
				required:true,
				equalTo:'#password'
			}
		},
		messages: {
			username: {
				required: " 用户名不能为空",
				minlength: " 用户名在4-16位之间",
				maxlength: " 用户名在4-16位之间"
			},
			password: {
				required: " 密码不能为空",
				minlength: " 密码输入太短",
				maxlength: " 密码输入超长"
			},
			passwordAgain:{
				required: " 密码不能为空",
				equalTo:"两次密码不一致"
			},
			linknum:{
				required: " 联系方式不能为空",
				isMobile: "输入正确的号码"
			}
		}
	});

	$(".cancel").click(function() {
		validator.resetForm();
	});
});

3.核对html中各个元素名称是否与校验文件中的关键字匹配

<style>
.error1 {
        color:#ff7800;
     }  
</style>
<form  action="registerAction" style="" method="post" class="form-widget" id="registerNormal">
		<div class="form-warning" data-role="error"><p id="dd"></p></div>
		<div class="form-group">
		<label class="form-label">账号 <span class="error1">*</span></label>
			<div class="form-control">
				<label class="input-group">
					<input type="text" name="username" value="" id="username" class="input-text" placeholder="用户名" data-role="input" />
				</label>
			</div>
	</div>
	
	<div class="form-group">
		<label class="form-label">密码 <span class="error1">*</span></label>
		<div class="form-control">
			<div class="form-row13">
 				<label class="input-group">
 					<input type="password" name="password" id="password"  class="input-text"   placeholder="6-16位，不含空格">
 				</label>
			</div>
		</div>
    </div>
	<div class="form-group">
		<label class="form-label">确认</label>
			<div class="form-control">
				<div class="form-row13">
					<label class="input-group">
						<input type="password" name="passwordAgain" id="passwordAgain" class="input-text" placeholder="再次输入密码" />
                    </label>
			</div>
		</div>
	</div>
	
	<div class="form-group">
		<label class="form-label">联系</label>
		<div class="form-control">
			<label class="input-group">
				<select  class="input-text" name="select">
				  <option value="1">手机</option>
				  <option value="2">QQ</option>
				</select>
			</label>
		</div>
	</div>
	
	<div class="form-group">
		<label class="form-label">号码/ID <span class="error1">*</span></label>
		<div class="form-control">
			<label class="input-group">
				<input type="text" name="linknum"  id="linknum" class="input-text"/>
			</label>
		</div>
	</div>

	<input type="hidden" name="backUrl" value="">
	<div class="form-opt">
		<div class="form-group">
			<button class="btn btn-primary btn-large js-touch-state" type="submit" data-role="sublimt">提交</button>
		</div>
		<div class="form-group">
                <p class="text-group">已有账号？<a href="login.jsp">立即登录></a></p>
        </div>
    </div>
</form>

<script type="text/javascript" src="js/validate/jquery.js"></script>
<script type="text/javascript" src="js/validate/jquery.validate.js"></script>
<script type="text/javascript" src="js/validate/signformValidatorClass.js"></script>