validate插件 --- 表单校验

validate插件：

　　validate是已封装好的第三方工具，用于表单校验

　　使用步骤：

　　　　1.导入jquery.js

　　　　2.导入validate.js

　　　　3.在页面加载成功后，对表单进行校验   $("选择器").validate()

　　　　4.在validate中编写校验规则

　　　　　　$("选择器").validate({

　　　　　　　　rules:{};

　　　　　　　　messages:{}

　　　　　　});

　　默认校验规则：

　　validate使用示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <!--validate校验库-->
        <script type="text/javascript" src="../js/jquery.validate.js" ></script>
        <!--国际化库，中文提示-->
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#formId").validate({
                    rules:{
                        //通过字段的name属性校验
                        username:"required",
                        //字段的name属性：{校验器："值",校验器:"值"}
                        password:{
                            required:true,
                            digits:true
                        },
                        repassword:{
                            equalTo:"[name='password']",
                        },
                        zuixiaozhi:{
                            min:8,
                        },
                        shuzhiqujian:{
                            range:[3,5],
                        }
                        
                    },
                    messages:{
                        username:"用户名不为空",
                        password:{
                            required:"密码不为空",
                            digits:"密码只能为数字"
                        },
                        repassword:{
                            equalTo:"两次输入内容不一致"
                        },
                        zuixiaozhi:{
                            //动态获取min的值
                            min:"请输入大于{0}的数",
                        },
                        shuzhiqujian:{
                            range:"请输入{0}-{1}之间的数"
                        }
                    }
                })
            })
        </script>
    </head>
    <body> 
        <form id="formId" action="">
            必填：<input type="text" name="username"/> <br/>
            必填数字：<input type="text" name="password"/> <br />
            必填重复：<input type="text" name="repassword"/> <br />
            最小值：<input type="text" name="zuixiaozhi"/> <br />
            区间：<input type="text" name="shuzhiqujian"/> <br />
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

 　　表单校验：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
    <script type="text/javascript" src="../js/jquery.validate.js" ></script>
    <script type="text/javascript" src="../js/messages_zh.js" ></script>
    <script>
        $(function(){
            $("#formid").validate({
                rules:{
                    username:{
                        required:true,
                    },
                    password:{
                        rangelength:[3,6],
                        required:true,
                        
                    },
                    repassword:{
                        equalTo:"#password",
                    },
                    email:"email",
                    sex:"required",
                },
                messages:{
                    username:{
                        required:"用户名不为空",
                    },
                    password:{
                        required:"密码不为空",
                        rangelength:"长度为{0}-{1}区间", 
                    },
                    repassword:{
                        equalTo:"两次输入密码不一致",
                    }
                },
            })
        })
    </script>
    <style>
        
    </style>
    <body>
        <form action="#" method="get" id="formid">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="80%"><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男" checked="checked"> 男
                        <input type="radio" name="sex" value="女" />女
                        <!--<label for="sex" class="error"></label>-->
                        <label for="sex" class="error"></label>
                    </td>
                
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

 

posted @ 2020-07-21 16:01  Yisennnn丶  阅读(273)  评论(0)    收藏  举报