Form表单提交、自定义验证规则（validate插件）

最新推荐文章于 2024-01-11 16:03:07 发布

chesu9749

最新推荐文章于 2024-01-11 16:03:07 发布

阅读量413

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2524300/blog/607025

版权

//插件下载： http://jqueryvalidation.org/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>Form表单提交、自定义验证规则（validate插件）</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<form id="form1" action="index6.html" method="post" style="margin: 200px;">
    <label for="frname">姓名：</label>
    <input id="frname" name="frname" type="text"/></br>

    <label for="email">email</label>
    <input id="email" name="email" type="email" class="{required:true,minlength:3, maxlength:5,
messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}"/></br>
    <label for="password">密码</label>
    <input id="password" name="password" type="password" /> </br>

    <label for="confirm_password">确认密码</label>
    <input id="confirm_password" name="confirm_password" type="password"/></br>

    <label for="mobile">手机号码：</label><input type="text" id="mobile" name="user[mobile]"/></br>

    男:<input type="radio" id="gender_male" value="m" name="gender"/><br />
    女:<input type="radio" id="gender_female" value="f" name="gender" /><br />

    选项1<input type="checkbox" id="check_1" value="1" name="checkGroup"/><br />
    选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
    选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />

    <select id="selectbox" name="selectbox">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <input type="submit" value="Submit" />
</form>
</body>

<script type="text/javascript">


    // 字符验证
    jQuery.validator.addMethod("frname",function(value,ele){
        return this.optional(ele)|| /^[\u0391-\uFFE5\w]+$/.test(value);
    });
    jQuery.validator.addMethod("mobile",function(value,ele){
        var se= /^[0-9]{8,11}$/i;
        return this.optional(ele)|| se.test(value);
    })

    //然后就可以使用这个规则
    $("#form1").validate({
        rules:{
            password:{    //password:input 的name
                required:true,
                minlength:5
            },
            confirm_password:{
                required:true,
                minlength:5,
                equalTo:"#password"
            },
            email:{
                required:true,
                email:true
            },
            frname:{
                required:true,
                rangelength:[5,10]
            },
            "user[mobile]":{
                required:true,
                mobile:true
            },
            gender:{
                required:true
            },
            checkGroup:{
                required:true,
                minlength:2
            },
            selectbox:{
                required:true
            }

        },
        messages:{
            password:{
                required:"没有填写密码",
                minlength: "密码不能小于{0}个字符"
            },
            confirm_password:{
                required:"没有填写密码",
                minlength: "确认密码不能小于{0}个字符",
                equalTo:"两次不一致"
            },
            email:{
                required:"输入email地址",
                email:"不是有效地址"
            },
            frname:{
                required:"用户名不能为空",
                rangelength:"5-10g个字符之间"
            },
            "user[mobile]":{
                required:"手机号码不能为空"
            },
            gender:{
                required:"必须选"

            },
            checkGroup:{
                required:"必须选",
                minlength:"至少选2项"
            },
            selectbox:{
                required:"必须选"
            }
        }

    })

</script>

</html>

转载于:https://my.oschina.net/u/2524300/blog/607025

chesu9749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Form表单提交、自定义验证规则（validate插件）

//插件下载：http://jqueryvalidation.org/<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/html"xmlns="http://www.w3.org/1999/html"xmlns=...
复制链接

扫一扫