Form表单验证神器： jquery.validate.min.js

steve1988717

于 2019-06-05 08:47:23 发布

阅读量834

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/steve1988717/article/details/90896142

版权

Jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了使用jquery.validate.min.js进行表单验证的方法，重点在于如何引入该插件以及设置有效的form标签和name属性，以实现浏览器对表单数据的正确提交。最新版本为1.17.0，可在github上下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery validate当前最新版本是1.17.0，下载链接是：https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0

从字面就知道既然是jquery的插件，首先得引入jquery，然后下载jquery-validate.js后引入。

其次既然是表单校验，首先得有一个表单，即form标签，然后由于浏览器是通过name属性来提交表单数据的，所以需要给校验的控件都加上name属性。

<section id="xiebiao">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                    <form id="commentForm" name='commentForm' action="/plus/diy.php" enctype="multipart/form-data" method="post">
                        <input type="hidden" name="action" value="post" />
                        <input type="hidden" name="diyid" value="1" />
                        <input type="hidden" name="do" value="2" />

                        <div class="col-md-6">
                            <div class="form-group">
                              <label for="jusername">姓名：</label>
                              <input type="text" class="form-control" id="jusername" name='jusername'>
                            </div>
                        </div>
                        <div class="col-md-6">
                                <div class="form-group">
                                  <label for="jtel">电话：</label>
                                  <input type="text" class="form-control" id="jtel" name='jtel'>
                                </div>
                        </div>
                        <div class="col-md-6">
                                <div class="form-group">
                                  <label for="jaddress">地址：</label>
                                  <input type="text" class="form-control" id="jaddress" name='jaddress'>
                                </div>
                        </div>
                        <div class="col-md-6">
                                <div class="form-group">
                                  <label for="jwechat">微信：</label>
                                  <input type="text" class="form-control" id="jwechat" name='jwechat'>
                                </div>
                        </div> 
                        <div class="col-md-8">
                                <div class="form-group">
                                    <label for="jmessage">留言内容：</label>
                                    <textarea name='jmessage' id="jmessage" class="form-control" cols="5" rows="7"></textarea>
                                </div>
 
                        </div>  
                        <div class="col-md-12">
                                <div class="col-md-4">
                                        <input type="submit" id='submit' name='submit' class="btn btn-primary btn-block" value="提交申请">
                                   </div>
                               <div class="col-md-4">
                                
                               </div>
                               <div class="col-md-4"></div>
                        </div>  
                        <input type="hidden" name="dede_fields" value="jusername,text;jtel,text;jaddress,text;jwechat,text;jmessage,multitext" />
                        <input type="hidden" name="dede_fieldshash" value="ef83cc61a209abea2892d860b02e0a58" />  
                    </form>
                    
            </div>
        </div>
    </div>
</section>

下面是验证

<script>
 $(function(){
    $("#commentForm").validate({
         rules:{
            jusername:"required",
            jtel:{
                required:true,
                rangelength:[6,11]
                },
            jaddress:"required",
            jwechat:"required",
            jmessage:"required",
          },
         messages:{
            jusername:"请输入用户名",
            jtel:{
                required:"请输入电话号码",
                rangelength:"电话位数不对"
                },
            jaddress:"请输入您的地址",
            jwechat:"请输入您的微信号",
            jmessage:"请输入您的留言",
         }
     });
 })
     
</script>