Jquery验证插件Validation的运用

最新推荐文章于 2022-08-04 05:00:00 发布

RyansChen

最新推荐文章于 2022-08-04 05:00:00 发布

阅读量1.2k

点赞数

分类专栏： jquery笔记

本文链接：https://blog.csdn.net/RyansChen/article/details/53263093

版权

jquery笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.引入jqueryJS文件、validation插件的JS文件

 <script src="jquery-validation-1.15.1/lib/jquery-1.9.1.js"></script>
<script src="jquery-validation-1.15.1/lib/jquery.validate.js"></script>

2.Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>jQuery Validate验证</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script src="jquery-validation-1.15.1/lib/jquery-1.9.1.js"></script>
		<script src="jquery-validation-1.15.1/lib/jquery.validate.js"></script>
        <script type="text/javascript">
        $(function(){
            var validate = $("#myform").validate({
                //debug: true, //调试模式取消submit的默认提交功能   
                //errorClass: "label.error", //默认为错误的样式类为：error   
                //focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
                //onkeyup: false,   
                submnitHandler: function(){   //表单提交句柄,为一回调函数，带一个参数：form   
                    //。。。。。。。这里写验证成功后执行的方法
                    alert("提交表单");
                    //form.submit();   //提交表单   
                },   
                
                rules:{
                    myname:{
                        required:true
                    }/*,
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    } */                   
                },
                messages:{
                    myname:{
                        required:"必填"
                    }/*,
                    email:{
                        required:"必填",
                        email:"E-Mail格式不正确"
                    },
                    password:{
                        required: "不能为空",
                        rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
                    },
                    confirm_password:{
                        equalTo:"两次密码输入不一致"
                    } */                                   
                }
            });    
    	
        });
        </script>
    </head>

    <body>
        <form id="myform" >
            <p>
                <label >用户名：</label>
                <input  name="myname" />
            </p>
            
            <p>
                <input type="submit" value="立即注册" />
            </p>
        </form>
    </body>
</html>

在验证checkbox和radio控件时，验证信息不会出现在最后的控件文本后面，而是直接跟在第一个控件的后面，不符合我们的要求。

解决办法是在validate({})追加以下代码：

errorPlacement: function(error, element) { 
	    	  if ( element.is(":radio") ) 
	    	    error.appendTo ( element.parent() ); 
	    	  else if ( element.is(":checkbox") ) 
	    	    error.appendTo ( element.parent() ); 
	    	  //else if ( element.is("input[name=captcha]") ) 
	    	   // error.appendTo ( element.parent() ); 
	    	  else
	    	    error.insertAfter(element); 
	    	}

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

RyansChen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery验证插件Validation的运用

1.引入jqueryJS文件、validation插件的JS文件 2.Demo jQuery Validate验证 $(function(){ var validate = $("#myf
复制链接

扫一扫