jq-validate表单校验

最新推荐文章于 2024-05-23 22:33:59 发布

Qyt-Coding

最新推荐文章于 2024-05-23 22:33:59 发布

阅读量180

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_41519442/article/details/105652041

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

笔记!!!
html代码，form表单的id为myform

   <form class="form-horizontal m"id="myform"  >
            <div class="form-group">    
                <label class="col-sm-3 control-label">用户名：</label>
                <div class="col-sm-8">
                    <input name="username" class="form-control" type="text" id="username">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">密码：</label>
                <div class="col-sm-8">
                    <input name="password" class="form-control" type="password" id="password">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">手机号码：</label>
                <div class="col-sm-8">
                    <input name="phone" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">电子邮箱：</label>
                <div class="col-sm-8">
                    <input name="email" class="form-control" type="text">
                </div>
            </div>
        </form>

在引入js代码

 jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });
    $( "#myform" ).validate({
        rules: {
            username: {
                required:true
            },
            password: {
                required:true,
                checkPwd:true,
            },
            email:{
                required:true,
                checkEmail:true,
            }
        },
        messages: {
            username: {
                required: "请输入用户名"
            },
            password: {
                required: "请输入密码!!!",
                rangelength:"*长度为6到16位！"
            },
            email:{
                required:"*必填！",
                email:"*请输入正确的邮箱！",
            }
        },
        focusInvalid:true,
        focusCleanup:true,
        submitHandler:function(form){
			//这种方式可以
			form.submit();
			//这种更好点
// 			$.ajax({
// 				cache:true,
// 				type:"POST",
// 				url:"MethodServlet?method=submit",
// 				data:$(form).serialize()
// 				,async:false,
// 				error:function(request){
// 					alert("error");
// 				},
// 				success:function(data){
// 					alert("ok");
// 				}
// 			});
		}
    });


    $.validator.addMethod("checkEmail",function(value,element,params){
        var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
        return this.optional(element)||(checkEmail.test(value));
    },"*请输入正确的邮箱！");

    $.validator.addMethod("checkPwd",function(value,element,params){
        var checkPwd = /^\w{6,16}$/g;
        return this.optional(element)||(checkPwd.test(value));
    },"*只允许6-16位英文字母、数字！");