validate 表单验证

最新推荐文章于 2023-08-05 16:29:04 发布
最新推荐文章于 2023-08-05 16:29:04 发布
阅读量832 收藏
点赞数
分类专栏： ajax jquery-eas 文章标签： javascript jquery from表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35070434/article/details/53456004
版权

导入的文件

   
   
  1.  <script src="js/jquery-1.8.3.js"></script>
  2.     <script src="js/valid/jquery.validate.min.js"></script>
验证的时候只能同步，不能异步

将提示错误放置于指定容器中

   
   
  1. <div class="div-box">
  2.          <div id="errorInfo"></div>  //提示错误放置的地方
  3.          <form id="formA" action="jsp/valid/testA.jsp">
  4.               <div class field-box">
  5.                  <div class="field-text line-left">
  6.                    <label>姓名：</label> <input type="text" value="" name="ename">
  7.                  </div>
  8.                  <div class="field-msg line-left"></div>
  9.                  <div class="clearfiex"></div>
  10.               </div>
  11.               
  12.                <div class="field-box">
  13.                  <div class="field-text line-left">
  14.                     <label>年龄：</label> <input type="number" name="age">
  15.                  </div>
  16.                  <div class="field-msg line-left"></div>
  17.                  <div class="clearfiex"></div>
  18.               </div>
  19.               
  20.               <input type="submit" value="提交">
  21.          </form>
  22.       </div>
  23.       
  24.      <script type="text/javascript">
  25.         $(function(){
  26.            var container = $("#errorInfo"); //获取放置提示错误的 
  27.              $("#formA").validate({
  28.                  rules:{                      //规则
  29.                      ename:"required",           //设置名字为必填
  30.                      age:{                        //设置年龄的规则
  31.                         required:true,
  32.                         range:[19,30]
  33.                      }
  34.                  },
  35.                 messages:{
  36.                    ename:{                        //名字不符合规则时触发相应的mesg
  37.                       required:"用户名称是必须的"
  38.                    },
  39.                    age:{                                   //年龄不符合规则时触发相应的mesg
  40.                        required:"年龄是必须要填写的",  
  41.                        range:"年龄必须是{0}到{1}之间"
  42.                    }
  43.                 },
  44.                 errorElement:"div", //放置错误的div
  45.                 errorLabelContainer: container, //放置错误的容器
  46.              })
  47.         })
  48.      </script>

通过按钮提交

    
    
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. 

  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     
  12.     <title>My JSP 'demoA.jsp' starting page</title>
  13.     
  14. 	<meta http-equiv="pragma" content="no-cache">
  15. 	<meta http-equiv="cache-control" content="no-cache">
  16. 	<meta http-equiv="expires" content="0">    
  17. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18. 	<meta http-equiv="description" content="This is my page">
  19. 	<!--
  20. 	<link rel="stylesheet" type="text/css" href="styles.css">
  21. 	-->
  22.    <style type="text/css">
  23.      .field-box{ width: 600px; border: 1px blue solid; margin-bottom: 10px}
  24.      .line-left{ float: left;}
  25.      .clearfiex{ clear: both;}
  26.      span.error {   //错误时候出现的图标
  27. 		background:url("images/unchecked.gif") no-repeat 0px 0px;
  28. 		padding-left: 16px;
  29. 	}
  30. 	span.success {   //验证成功时的图标
  31. 		background:url("images/checked.gif") no-repeat 0px 0px;
  32. 		padding-left: 16px;
  33. 	}
  34.    </style>
  35.    
  36.     <script src="js/jquery-1.8.3.js"></script>
  37.     <script src="js/valid/jquery.validate.min.js"></script>
  38.    <!--   <script src="js/valid/localization/messages_zh.min.js"></script> -->
  39.   </head>
  40.   
  41.   <body>
  42.       <div class="div-box">
  43.          <form id="formA" action="jsp/valid/testA.jsp">
  44.               <div class="field-box">
  45.                  <div class="field-text line-left">
  46.                    <label>姓名：</label> <input type="text" value="" name="ename">
  47.                  </div>
  48.                  <div class="field-msg line-left"></div>
  49.                  <div class="clearfiex"></div>
  50.               </div>
  51.               
  52.                <div class="field-box">
  53.                  <div class="field-text line-left">
  54.                     <label>年龄：</label> <input type="number" name="age">
  55.                  </div>
  56.                  <div class="field-msg line-left"></div>
  57.                  <div class="clearfiex"></div>
  58.               </div>
  59.               
  60.               <input type="submit" value="提交">
  61.               
  62.               <input type="button" value="提交2" onclick="submitFormX()">
  63.          </form>
  64.       </div>
  65.       <script type="text/javascript">
  66.          function submitFormX(){              //按钮提交
  67.              var flag = $("#formA").valid();   // valid() 表单验证的方法 返回true或false
  68.              alert(flag);
  69.             if(flag)
  70.              $("#formA").submit();           //提交
  71.              
  72.          } 
  73.       </script>
  74.      <script type="text/javascript">
  75.         $(function(){
  76.              $("#formA").validate({          //规则和错误消息要一致对应
  77.                  debug: false,   
  78.                  rules:{                     //规则
  79.                      ename:"required",
  80.                      age:{
  81.                         required:true,
  82.                         range:[19,30]
  83.                      }
  84.                  },
  85.                 messages:{                              //错误消息
  86.                    ename:{
  87.                       required:"用户名称是必须的"
  88.                    },
  89.                    age:{
  90.                        required:"年龄是必须要填写的",
  91.                        range:"年龄必须是{0}到{1}之间"
  92.                    }
  93.                 },
  94.                 validClass:'success',                //修复复合条件后正确图标无法出现
  95.                 errorElement: "span",                     //将错误元素包装到span中
  96.                 errorPlacement: function(error, element) {            //error, 错误的消息（span包装好的） element  错误的表单元素
  97. 				    error.appendTo(element.parent().next(".field-msg"));  //默认错误信息出现在表单元素的右侧，这里可以调整位置，这是将错误消息放到表单元素的下面的div中
  98. 			    },
  99. 			    success: function(label) {     //laber是一个封装了的对象，对该对象添加验证成功的样式class，这个会出现在错误信息定义的位置
  100. 				     label.addClass("success");
  101. 			    }
  102.              })
  103.         })
  104.      </script>
  105.   </body>
  106. </html>

form表单中的sumbit提交

    
    
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. 

  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     
  12.     <title>My JSP 'demoA.jsp' starting page</title>
  13.     
  14. 	<meta http-equiv="pragma" content="no-cache">
  15. 	<meta http-equiv="cache-control" content="no-cache">
  16. 	<meta http-equiv="expires" content="0">    
  17. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18. 	<meta http-equiv="description" content="This is my page">
  19. 	<!--
  20. 	<link rel="stylesheet" type="text/css" href="styles.css">
  21. 	-->
  22.    <style type="text/css">
  23.      .field-box{ width: 600px; border: 1px blue solid; margin-bottom: 10px}
  24.      .line-left{ float: left;}
  25.      .clearfiex{ clear: both;}
  26.      span.error {
  27. 		background:url("images/unchecked.gif") no-repeat 0px 0px;
  28. 		padding-left: 16px;
  29. 	}
  30. 	span.success {
  31. 		background:url("images/checked.gif") no-repeat 0px 0px;
  32. 		padding-left: 16px;
  33. 	}
  34.    </style>
  35.    
  36.     <script src="js/jquery-1.8.3.js"></script>
  37.     <script src="js/valid/jquery.validate.min.js"></script>
  38.    <!--   <script src="js/valid/localization/messages_zh.min.js"></script> -->
  39.   </head>
  40.   
  41.   <body>
  42.       <div class="div-box">
  43.          <form id="formA" action="jsp/valid/testA.jsp">
  44.               <div class="field-box">
  45.                  <div class="field-text line-left">
  46.                    <label>姓名：</label> <input type="text" value="" name="ename">
  47.                  </div>
  48.                  <div class="field-msg line-left"></div>
  49.                  <div class="clearfiex"></div>
  50.               </div>
  51.               
  52.                <div class="field-box">
  53.                  <div class="field-text line-left">
  54.                     <label>年龄：</label> <input type="number" name="age">
  55.                  </div>
  56.                  <div class="field-msg line-left"></div>
  57.                  <div class="clearfiex"></div>
  58.               </div>
  59.               
  60.               <input type="submit" value="提交">
  61.          </form>
  62.       </div>
  63.       
  64.      <script type="text/javascript">
  65.         $(function(){
  66.              $("#formA").validate({
  67.                  debug: true,
  68.                  rules:{
  69.                      ename:"required",
  70.                      age:{
  71.                         required:true,
  72.                         range:[19,30]
  73.                      }
  74.                  },
  75.                 messages:{
  76.                    ename:{
  77.                       required:"用户名称是必须的"
  78.                    },
  79.                    age:{
  80.                        required:"年龄是必须要填写的",
  81.                        range:"年龄必须是{0}到{1}之间"
  82.                    }
  83.                 },
  84.                 validClass:'success',
  85.                 errorElement: "span",
  86.                 errorPlacement: function(error, element) {
  87. 				    error.appendTo(element.parent().next(".field-msg"));
  88. 			    },
  89. 			    success: function(label) {
  90. 				     label.addClass("success");
  91. 			    }
  92.              })
  93.         })
  94.      </script>
  95.   </body>
  96. </html>

 submitHandler方式提交

 submitHandler与success的区别：
　success：当表单元素验证成功时执行，对于同一个表单元素，由于onkeyup、onfocusout、onsubmit等事件都会触发验证，所以本方法可能会多次执行。
　　submitHandler：当表单验证成功并提交时执行， 存在此方法时表单只能在此方法内部执行form.submit()才能提交，可理解成它替代了表单的onsubmit方法 

    
    
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. 

  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     
  12.     <title>My JSP 'demoA.jsp' starting page</title>
  13.     
  14. 	<meta http-equiv="pragma" content="no-cache">
  15. 	<meta http-equiv="cache-control" content="no-cache">
  16. 	<meta http-equiv="expires" content="0">    
  17. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18. 	<meta http-equiv="description" content="This is my page">
  19. 	<!--
  20. 	<link rel="stylesheet" type="text/css" href="styles.css">
  21. 	-->
  22.    <style type="text/css">
  23.      .field-box{ width: 600px; border: 1px blue solid; margin-bottom: 10px}
  24.      .line-left{ float: left;}
  25.      .clearfiex{ clear: both;}
  26.      span.error {
  27. 		background:url("images/unchecked.gif") no-repeat 0px 0px;
  28. 		padding-left: 16px;
  29. 	}
  30. 	span.success {
  31. 		background:url("images/checked.gif") no-repeat 0px 0px;
  32. 		padding-left: 16px;
  33. 	}
  34.    </style>
  35.     <script src="js/jquery-1.8.3.js"></script>
  36.     <script src="js/valid/jquery.validate.min.js"></script>
  37.    <!--   <script src="js/valid/localization/messages_zh.min.js"></script> -->
  38.   </head>
  39.   
  40.   <body>
  41.       <div class="div-box">
  42.          <form id="formA" action="jsp/valid/testA.jsp">
  43.               <div class="field-box">
  44.                  <div class="field-text line-left">
  45.                    <label>姓名：</label> <input type="text" value="" name="ename">
  46.                  </div>
  47.                  <div class="field-msg line-left"></div>
  48.                  <div class="clearfiex"></div>
  49.               </div>
  50.               
  51.                <div class="field-box">
  52.                  <div class="field-text line-left">
  53.                     <label>年龄：</label> <input type="number" name="age">
  54.                  </div>
  55.                  <div class="field-msg line-left"></div>
  56.                  <div class="clearfiex"></div>
  57.               </div>
  58.               
  59.               <input type="submit" value="提交">
  60.          </form>
  61.       </div>
  62.       
  63.      <script type="text/javascript">
  64.         $(function(){
  65.              $("#formA").validate({
  66.                  debug: false,
  67.                  rules:{
  68.                      ename:"required",
  69.                      age:{
  70.                         required:true,
  71.                         range:[19,30]
  72.                      }
  73.                  },
  74.                 messages:{
  75.                    ename:{
  76.                       required:"用户名称是必须的"
  77.                    },
  78.                    age:{
  79.                        required:"年龄是必须要填写的",
  80.                        range:"年龄必须是{0}到{1}之间"
  81.                    }
  82.                 },
  83.                 validClass:'success',
  84.                 errorElement: "span",
  85.                 errorPlacement: function(error, element) {
  86. 				    error.appendTo(element.parent().next(".field-msg"));
  87. 			    },
  88. 			    success: function(label) {
  89. 				     label.addClass("success");
  90. 			    },
  91. 			    submitHandler:function(form){ //替代了表单的onsubmit			 
  92.                     alert(form);   //提交表单的处理自己ajax提交  或  只能用form.submit()
  93. 			    }
  94.              })
  95.         })
  96.      </script>
  97.   </body>
  98. </html>

与easyui的交互：

交互的地方
easyui的ajax提交中
  1. onSubmit: function(){ //提交数据前触发，返回false 不做提交，返回true 才提交。
  2. // do some check
  3. alert("提交前触发");
  4. return $("#formA").valid(); //在表单提交时验证。validate的验证方式交互的地方
  5. } ,
代码： 

    
    
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <!-- action="userServlet.do?dir=edit" -->
  3.    <style type="text/css">
  4.      .field-box{ width: 600px; border: 1px blue solid; margin-bottom: 10px}
  5.      .line-left{ float: left;}
  6.      .clearfiex{ clear: both;}
  7.      span.error {
  8. 		background:url("images/unchecked.gif") no-repeat 0px 0px;
  9. 		padding-left: 16px;
  10. 	}
  11. 	span.success {
  12. 		background:url("images/checked.gif") no-repeat 0px 0px;
  13. 		padding-left: 16px;
  14. 	}
  15.    </style>
  16.   <form id="userForm"  method="post">
  17.       <fieldset>
  18.        <legend>用户编辑</legend>
  19.     <label>账户：</label> <input id="uname" type="text"  value="${requestScope.user.uname}" name="uname"><br/>
  20.     <label>性别：</label> 
  21.      <input type="radio" value="男" name="sex"  ${requestScope.user.sex=="男"?"checked":""} > 男
  22.      <input type="radio" value="女" name="sex"  ${requestScope.user.sex=="女"?"checked":""}> 女
  23.     <br/>
  24.     <label>年龄：</label> <input type="number" value="${requestScope.user.age}" name="age"><br/>
  25.      <input type="hidden" value="${requestScope.user.userid}" name="userid">
  26.      <input type="button" value="提交" onclick="submitFormX()">
  27.    </fieldset>
  28. </form>
  29. //validate的表单验证
  30. <script type="text/javascript">
  31. 	  $(function(){
  32.              $("#formA").validate({
  33.                  debug: true, //测试的时候用false，表示点击提交不提交，上线的时候改为 
  34.                  rules:{
  35.                      ename:"required",
  36.                      age:{
  37.                         required:true,
  38.                         range:[19,30]
  39.                      }
  40.                  },
  41.                 messages:{
  42.                    ename:{
  43.                       required:"用户名称是必须的"
  44.                    },
  45.                    age:{
  46.                        required:"年龄是必须要填写的",
  47.                        range:"年龄必须是{0}到{1}之间"
  48.                    }
  49.                 },
  50.                 validClass:'success',
  51.                 errorElement: "span",
  52.                 errorPlacement: function(error, element) {
  53. 				    error.appendTo(element.parent().next(".field-msg"));
  54. 			    },
  55. 			    success: function(label) {
  56. 				     label.addClass("success");
  57. 			    }
  58.              })
  59.         })   
  60. 	
  61. </script>
  62. 

  63. //easyui的框架ui
  64. <script type="text/javascript">
  65.    function submitFormX(){
  66.       //var userinfo =  $("#userForm").serialize() ;
  67.      // alert(userinfo);
  68.            $('#userForm').form({    
  69.             url:'userServlet.do?dir=edit',
  70.             onSubmit: function(){  //提交数据前触发，返回false 不做提交，返回true 才提交。
  71. 		        // do some check 
  72. 		        alert("提交前触发");   
  73. 		       return    $("#formA").valid();     //在表单提交时验证。validate的验证方式交互的地方
  74. 		    } ,
  75. 		     success:function(data){   
  76. 		       var data = eval('(' + data + ')');
  77. 		       if(data.resultFlag){
  78. 		           $('#userWin').window('close'); 
  79. 		           $.messager.show({
  80. 						title:'系统操作提示',
  81. 						msg:'添加用户成功。',
  82. 						timeout:5000,
  83. 						showType:'slide',
  84. 						style:{
  85. 							right:'',
  86. 							bottom:''
  87. 						}
  88. 					});
  89. 		           
  90. 		           $('#userdg').datagrid('reload');     // 重新载入当前页面数据  
  91. 		       }else{
  92. 		         
  93. 		       }  
  94. 		     }     
  95.           });
  96.        $('#userForm').submit();    
  97.    }
  98. </script>



cpf-freesky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
validate表单验证
06-13
使用jQuery的validation插件事项表单验证
关于form表单提交validate验证报错总结
喜东东的博客
08-05 9385
在开发时使用this.$refs.form.validate();会有几种情况报错： this.$refs.form.validate((valid) => {不进入这个函数}) 报没有validate方法 遇到以上问题从以下几个地方检查： 1.对于第一个bug，检查写的校验是否写正确了，能够正常callback出来，不然校验就走不出来当然就进入不到那个函数了； 2.对于第二个bug： a.检查html中是否给form定义了ref b.检查是否改组件是否只存在一个你定义...
validate实现表单验证
moxiaomo0804的博客
06-01 2089
目录 一、简介 二、使用方法 1、导库 2、 通过jqrery的选择器找到要验证的表单 3、在validate中编写校验规则 实例： 三、实例笔记： ​四、验证规则： 一、简介 validate是一款优秀的表单验证插件，内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则 自定义验证规则：可以很方便的 自定义验证规则 简单强大的验证信...
Validate表单验证
我的博客
05-25 336
Validate 是 jQuery 的一个子插件， 该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。// 全局修改Validate错误提示信息，仅当前页有效。// 修改年龄错误的提示信息，优先级高于全局错误提示。// rmote用法，用户名调用自定义接口校验。"年龄应为0~100的数字""年龄age必填字段哦~"//年龄应为0~100。//年龄应为0~100。"请填写正确的手机号码""这个为必填字段哦~""自定义校验错误~"
Validate 表单验证用法说明
大话家的博客
06-24 8021
前言 Validate 是 jQuery 的一个子插件， 该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。该插件捆绑了一套有用的验证方法，同时提供了一个用来编写用户自定义方法的 API。默认使用英语作为错误信息，且已翻译成其他 37 种语言，支持中文错误提示。 官网地址：https://jqueryvalidation.org/ 菜鸟教程地址：http://www.360doc.com/content/17/0726/06/2708086
功能强大的jquery.validate表单验证插件
01-19
本文实例为大家分享了jquery.validate表单验证的使用方法，供大家参考，具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前，首先将表单验证的效果展示给大家。 1.点击表单项，显示帮助提示  2.鼠标离开表...
jquery validate表单验证插件
10-21
主要为大家详细介绍了jquery validate表单验证插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
深入学习jQuery Validate表单验证
10-22
主要针对jQuery Validate表单验证为大家进行详细介绍，如何在class属性里面并定义错误信息的提示，感兴趣的小伙伴们可以参考一下
jQuery Validate表单验证插件
04-16
jQuery Validate表单验证插件，前端jq验证，jq验证插件
Cpf-Validator:CPF验证程序（CPF验证程序）-Java
05-10
Cpf-Validator CPF验证器（CPF验证器） CPF是巴西国税局保留的记录，无论年龄或国籍，任何自然人只能使用一次。 每个条目由CPF为11个十进制数字的注册号唯一标识。 个人登记簿是巴西联邦税收局维护的登记簿，任何自然人，无论年龄或国籍，都可以在该登记簿中登记一次。 每个注册人都由一个11位十进制数字的CPF注册号唯一标识。 资料来源：维基百科（ ） 该项目包含Java中用于验证CPF的方法。 该项目包含用于CPF验证的Java方法。
Validate用户注册表单验证插件.zip
05-25
Validate用户注册表单验证插件是一款基于jQuery实现的通用表单验证插件，有DEMO实例，简单实用。可以进行账号、密码、电话、手机、IP、URL、电子邮箱、中文姓名、身份证号码、数字验证码、自定义验证规则-数字等用户注册信息的验证。
cpf:验证，格式化和生成CPF编号（验证，格式化和生成CPF编号）
05-10
cpf 处理巴西CPF号码的功能 安装 您可以使用npm或yarn安装它。 尝试： npm ： npm install cpf 纱： yarn add cpf 用法 const CPF = require ( 'cpf' ) ; 现在， CPF是具有某些功能的对象： format generate isValid CPF.format(cpf) 格式化CPF号。 例子 CPF . format ( '11144477735' ) ; //=> '111.444.777-35' 参数 cpf {字符串} CPF号。 返回带有格式化的CPF号的字符串。 CPF.generate(formatted, invalid) 生成一个随机的CPF编号。 参数 formatted { boolean }默认为true 。 它将生成一个格式化的CPF编号。 默认情况下， inval
FormValidate 表单验证功能代码更新并提供下载
09-06
加入验证模式 4,同3,但是当验证不通过时，立即停止向下检查。在模式3下，如果发生错误，会把错误记录，并向下检查，模式4就不向下检查了
jquery validate.js表单验证的基本用法入门
10-12
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
form表单校验
m0_65132206的博客
05-19 7555
表单校验的基本步骤--简单校验,可以在基础上添加if判断校验成功跳转路由......
vee-validate表单验证（自定义验证规则）
最新发布
m0_48799309的博客
08-05 434
① v-validate="{required:true,phone:true}"或者v-validate="'required|phone'" 里的required和phone都是上面写过的规则。这里的文件设计思路是：把自定义的部分作为一个单独的文件（src\utils\validate.js）去整理，需要的正则是另一个文件（src\utils\reg.js）3.在你需要使用的文件中做基础配置（src\utils\validate.js）1.首先要在main.js中导入，以确保你能在这个项目中使用它。
validate的表单验证
08-18 677
一、一般情况下表单的验证，错误信息放在表单后面，也是默认的情况，但是在使用的时候，错误的信息会指定放在某个位置 1、使用errorPlacement，可以把错误的信息放在指定的标签里面。 $("#saveForm").validate({ rules: { name:{ required:true },
web 中 validate 表单验证时间
04-19
可以使用 JavaScript 和 HTML 的表单验证。在 HTML 中，可以使用 required 属性、pattern 属性等来限制用户输入；在 JavaScript 中，可以使用正则表达式、条件语句等来进行表单验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值