validatord的使用方法理解

今天是周日,自己已经在公司上班一周啦,可是这是我感觉最难熬 一周之一,上一次还是在高考失利的时候,自己整整一个月没有出去,在家里呆着,不知道干什么,这一此自己也是,感觉自己很难在这个公司熬下去,但是,这只是个开始,一切都还在继续,加油,我一定要更加努力,用努力把自己所欠缺的多补回来!

下一个目标就是自己把微信小程序再学习一下,自己做出来一个成品!

正题:这两天一直在搞validator这个表单验证插件

 <script type="text/javascript" src="/js_v2/jquery1.9.min.js"></script>
    <script type="text/javascript" src="/js/validator.js"></script>
    <script type="text/javascript" src="/js_v2/layer/layer.js"></script>
    <script type="text/javascript" src="/js_v2/laydate/laydate.js"></script>
    <script type="text/javascript" src="/js_v2/jquery.timeago.js"></script>
    <script type="text/javascript" src="/js_v2/JgAjax1.0.min.js"></script>
    <script type="text/javascript" src="/js/md51.js"></script>
    <script type="text/javascript" src="/js/jquery.form.js"></script>
    <link href="/css_v2/common_style.css" rel="stylesheet" type="text/css">

 引入js的时候一定要把validator和jquery.form进行引入,在接下来进行提交数据的时候回进行使用form中 的方法

 <div class="jui-panel">
        <div class="jui-panel-body" style="padding:15px;">
            <form name="sec_form" id="sec_form" method="POST" action="sub_act.php" enctype="multipart/form-data"
                onSubmit="return Validator.Validate(this,3)">
                <div class="jui-form">
                    <div class="formitem">
                        <div class="item_label">旧的密码:</div>
                        <div class="item_cont">
                            <input id="pwd_old" value="" style="width:200px;" class="jui-form-text" type="password"
                                require="true" datatype="Require" msg="必填" onchange="document.getElementById('pwd_old_hidden').value=md5(this.value)">
                            <font color='red'>*<span id="tpis0"></span></font>
                            <input type="hidden" name="pwd_old" id="pwd_old_hidden">
                        </div>
                    </div>
                    <div class="formitem">
                        <div class="item_label">新的密码:</div>
                        <div class="item_cont">
                            <input id="password" value="" style="width:200px;" class="jui-form-text" type="password"
                                require="true" datatype="Require" msg="必填" onchange="document.getElementById('password_hidden').value=md5(this.value)">
                            <font color='red'>*<span id='tpis'></span></font>
                            <input type="hidden" id="password_hidden" name="pwd">
                        </div>
                    </div>
                    <div class="formitem">
                        <div class="item_label">再次输入:</div>
                        <div class="item_cont">
                            <input id="password_repwd" value="" style="width:200px;" class="jui-form-text"
                                type="password" require="true" datatype="Require" msg="必填" onchange="document.getElementById('password_repwd_hidden').value=md5(this.value)">
                            <font color='red'>*<span id="tpis1"></span></font>
                            <input type="hidden" name="repwd" id="password_repwd_hidden">
                            <input type="hidden" name="act" value="edit_pass">
                        </div>
                    </div>
                    <div class="formitem2">
                        <input type="reset" class="jui-form-button danger" value="重置">
                        <input type="submit" class="jui-form-button primary" value="保存" id="savePas">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">

        $(function () {
            $("#sec_form").ajaxForm(function (data) {//选择form表单,然后在利用jquery。form中的方法ajaxForm进行返回数据的处理
                var json=JSON.parse(data)
                // console.log(json)
                if(json.state=='success'){
                    layer.msg(json.des,{time:1500});
                    layer.closeAll('iframe');
                }else{
                    layer.msg(json.des,{time:1500});
                }
            });
        });
    </script>

 最单的用法就是在input框上进行name属性的设置,属性名需要和接口的字段一致,如果不设置name属性,那么在提交数据的时候就不会把input框中的内容进行提交,

设置validator的规则,在input框中设置属性dataType=‘Require’这个是必填字段,必须进行填写,msg='提示'这个是错误的提示信息。

然后就可一看到提示信息啦!

猜你喜欢

转载自www.cnblogs.com/mrxinxin/p/10466032.html
今日推荐