zoukankan      html  css  js  c++  java
  • Validate表单验证

     

     案例代码如下

    <!DOCTYPE html>
    <html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="scripts/common/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/common/jquery.validate.js"></script
    <script type="text/javascript">
         $("#zhuce").validate({
                rules:{
                    regist_username:{
                        required:true
                       /* remote:{
                            type: "post",url: url,
                            data:{
                                userName:function () {
                                    return $("regist_username").val();
                                }
                            }
                        }用ajax判断数据库中用户名是否存在*/
                    },
                    regist_password:{
                        required:true,
                        minlength:6
                    },
                    final_password:{
                        equalTo:"#regist_password"
                    }
                },
                messages:{
                    regist_username:{required:"用户名不能为空"},
                    regist_password:{required:"密码不能为空",minlength:"密码最小的长度为6"},
                    final_password:{equalTo:"两次密码不一致"}
                },
                submitHandler: function () {
                //验证通过后进行注册
                    register();
                }
            })
      </script>
    </head>
    <body>
      <form id="zhuce">
                <dl>
                    <dt>
                        <div class='header'>
                            <h3>注&nbsp;册</h3>
                        </div>
                    </dt>
                    <dt></dt>
                    <dt>
                        <div class='letter'>
                            <label for="regist_username">用户名:&nbsp;</label>
                            <input type="text" name="regist_username" id="regist_username" tabindex='5'/>
                        </div>
                    </dt>
                    <dt>
                        <div class='letter'>&nbsp;&nbsp;&nbsp;称:&nbsp;<input type="text" name="nickname" id="nickname" tabindex='6'/>
                        </div>
                    </dt>
                    <dt>
                        <div class='letter'>
                            <label for="regist_password"> 密&nbsp;&nbsp;&nbsp;码:&nbsp;</label>
                           <input type="password" name="regist_password" id="regist_password" tabindex='7'/>
                        </div>
                    </dt>
                    <dt>
                        <div class='password'>
                            <label for="final_password">&nbsp;&nbsp;&nbsp;确认密码:&nbsp;</label>
                            <input type="password" name="final_password" id="final_password" tabindex='8'/>
                        </div>
                    </dt>
                    <dt>
                        <div>
                            <input type="submit" name="" id="regist_button" value='&nbsp注&nbsp册&nbsp' tabindex='9'/>
                            <input type="button" name="" id="back" value='&nbsp返&nbsp回&nbsp' tabindex='10'/>
                        </div>
                    </dt>
                </dl>
            </form>
    </body>
    </html>

    默认校验规则

     

  • 相关阅读:
    Flask框架基础4
    Flask框架基础3
    Flask框架基础2
    Flask框架基础1
    项目上线流程-Django后端+vue前端
    Git操作
    DRF-jwt认证
    四种方式实现单例模式
    drf框架4-views视图家族操作
    drf框架3-ModelSerializer操作序列化与反序列化
  • 原文地址:https://www.cnblogs.com/isme-zjh/p/12177339.html
Copyright © 2011-2022 走看看