精华内容
下载资源
问答
  • jquery简单表单实时验证,可以实现表单实时验证,代码结构简单实用。
  • html页面,js事件,实现注册表单实时验证和提交验证,自己改改就能用,还有使用说明和正则表达式文档供参考
  • Jquery自制表单实时验证

    千次阅读 2016-08-08 17:06:24
    关于Jquery表单

    关于Jquery表单验证,这里写了一个简单的例子,大致思路分享一下。

    首先获得页面的数据,然后去判断页面的元素,如果错误的话,就在DIV下面添加提示。

    这里用到了$("input").blur去触发校验,当然如果更规范一点可以使用blurkeyup时间来触发验证规则。

    而且这里用到了HTML的自定义标签,使得用户不用去写繁琐的表达式的JS验证,只需要在HTML页面使用自定义标签就可以了。最后在点击提交按钮的时候,我会去判断页面中是否存在提示信息,来控制提交。当然这只是一个很简单的小例子,以后会慢慢优化。

    这里先上js代码

    $(document).ready(function(){
     		  $("input").focus(function(){
     		   		
     		  });
     		  $("input").blur(function(){
     			 	var value=this.value; //获得文本框的值
    		   		var id=this.id;  //获得文本框的ID
    		   		var vname=$("#"+this.id).attr("vname"); //验证标签
    		   		var regular=$("#"+this.id).attr("regular"); //自定义验证
    		   		var errMsg=$("#"+this.id).attr("errMsg"); //提示信息
    		   		var fid="f"+id;
    		   		var flag=true;
    		   		if(isEmpty(value)){ 
    		   			msg=vname+"不能为空!";
    		   		}else {
    		   			$("#"+fid).remove();
    		   			if(isEmpty(regular)){
    		   				return;
    		   			}
    		   			var re=eval(regular);  //转义成正则表达式
    		   			if(re.test(value)){
    		   					flag=false;
    		   			}else{
    		   				msg=errMsg;
    		   			}
    		   			
    		   		}
    		   		if(flag){
    		   			var fidv=$("#"+fid);
    		   			if(fidv.length!=1)
    		   			$("#"+id).after("<font class=\"style1\" id="+fid+">"+msg+"</font>");
    		   			}
    		   		
     		  });
     		});
    function isEmpty(value){
             if(undefined==value||value==""||value==null){
                 return true;
             }else{
                 return false;
             }
         };
    

    CSS很简单,就是标红了一下

     <style type="text/css">
    .style1 {color: #FF0000}
    </style>
    HTML

    <div class="row"  id="registerDiv">
    	<div class="col-sm-12 pl0 pr0 whitecolor mt30 pb20 mb30">
    		<h5 class="font18 fontbold titlecolor mt30 mb30 border-b pb15 ml30 mr30">开始注册您的企业账户</h5>
    		<div class="col-md-8 col-md-offset-2">
    			<div class="form-group col-sm-12">
    			    <label for="disabledSelect">联系人</label>
    			    <div class="col-sm-12 pl0">
    				  <div class="col-md-6 pl0"><input class="form-control"  id="linkman" type="text"  regular="/[\u4E00-\u9FA5]{2,7}/g"  vname="联系人"  errMsg="联系人只能输入2-6位的中文"/></div>
    				</div>
     			</div>
     			<div class="form-group col-sm-12">
    			    <label for="disabledSelect">手机</label>
    			    <div class="col-sm-12 pl0">
    				  <div class="col-md-6 pl0"><input class="form-control"  name="mobilePhone"  id="mobilePhone"" type="number"   regular="/^1\d{10}$/"  vname="手机号"  errMsg="请输入正确的手机号"/></div>
    				  <div class="col-md-6 mt2"> <input type="button" style="height:32px;width:120px;"  value="点击发送验证码" οnclick="sendCode(this)"  /></div>
    				</div>
     			</div>
     			<div class="form-group col-sm-12">
    			    <label for="disabledSelect">手机验证码</label>
    			    <div class="col-sm-12 pl0">
    				  <div class="col-md-6 pl0"><input class="form-control"  id="mobileCaptcha" name="captcha"  type="text"  vname="手机验证码" /></div>
    				<!--   <div class="col-md-6 mt5">提示</div> -->
    				</div>
     			</div>
     			<div class="form-group col-sm-12">
    			    <label for="disabledSelect">公司全称</label>
    			    <div class="col-sm-12 pl0">
    				  <div class="col-md-6 pl0"><input class="form-control"  id="entName"  type="text"    vname="公司全称"  errMsg="请输入正确的公司名称"/></div>
    				 <!--  <div class="col-md-6 mt5">提示</div> -->
    				</div>
     			</div>
     			<div class="form-group col-sm-12">
    			    <label for="disabledSelect">验证码</label>
    			    <div class="col-sm-12 pl0">
    				  <div class="col-md-6 pl0">  <input id="picCaptcha" type="text" class="txt code" placeholder="输入验证码" style="width: 100px;" name="kaptcha"  vname="验证码"  > 
    				  </div>
    				</div>
     			</div>
     			<div class="form-group col-sm-12">
    			    <label class="checkbox-inline">
    				  <input type="checkbox"  οnclick="enable()" id="policy"> 我同意 
    				  <a data-toggle="modal" data-target="#policyProvision" href="">政策条款</a> 和 
    				  <a data-toggle="modal" data-target="#privacyClause" href="">隐私政策</a>
    				</label>
     			</div>
     			<div class="form-group col-sm-12 mb30">
    			    <button class="btn btn-sm btn-primary" type="button" οnclick="register()" id="register" disabled="true">注册</button>
     			</div>
    			</div>
    	</div>
    </div>

    最后在我们点击提交的时候去判断一下提示信息

    function register(){
    if($("#registerDiv").find("font").length>0){
    			alert("验证不通过");
    			return false;
    		}
    }
    

    这样的话会有几个优点:

    可以自定义验证规则:可以很方便地自定义验证规则

    简单而且强大的验证信息提示:没人了验证信息提示,并提供自定义覆盖默认提示信息功能

    实时进行验证的功能.:通过blur来触发验证规则

    最后附上几张效果图


    如过要限制input的框的长度的话,可以使用

    HTML <input> maxlength 属性

    <form action="demo_form.html">
      Username: <input type="text" name="usrname" maxlength="10"><br>
      <input type="submit" value="Submit">
    </form> 


    展开全文
  • js实现表单实时验证做出提示

    千次阅读 2017-03-16 12:12:29
    本文转自[打开](http://blog.csdn.net/u012063507/article/details/62417696)对于有很多填写项目的表单,我们可能更希望在用户没有填写时或填写出错时,就即时显示提示,而不是等到提交时才进行验证。  结合js的...
    本文转自[打开](http://blog.csdn.net/u012063507/article/details/62417696) 
    

    对于有很多填写项目的表单,我们可能更希望在用户没有填写时或填写出错时,就即时显示提示,而不是等到提交时才进行验证。

      结合js的onblur事件style.display属性可以实现此功能。

    html代码:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Register</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
      body{margin:0;padding: 0;}
      .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
      .login legend{font-weight: bold;color: green;text-align: center;}
      .login label{display:inline-block;width:130px;text-align: right;}
      .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
      input{height: 20px;width: 170px;}
      .borderRed{border: 2px solid red;}
      img{display: none;}
    </style>
    </head>
    <body>
    <div class="login">
        <form name="form" method="post" action="register.php" >
          <p><label for="name">UserName: </label>
          <input type="text" id="name" >
          <p id="titleNull"  style="display:none;"><font style="color:red;">不可为空</font></p>  
        </form>
      </div>
     </body>
    </html>
    js控制代码:

    <script type="text/javascript">
      function hasClass(obj,cls){  // 判断obj是否有此class
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
      }
      function addClass(obj,cls){ //给 obj添加class
        if(!this.hasClass(obj,cls)){ 
          obj.className += " "+cls;
        }
      }
      function removeClass(obj,cls){ //移除obj对应的class
        if(hasClass(obj,cls)){ 
          var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
          obj.className = obj.className.replace(reg," ");
        }
      }
    
    
      function checkName(name){  //验证name
        if(name != ""){ //不为空则正确
          removeClass(ele.name,"borderRed"); //移除class,使原来的红色边框变为正常颜色
          document.getElementById("titleNull").style.display = "none"; //不显示提示信息
          return true;
        }else{ //若为空
          addClass(ele.name,"borderRed"); //添加class,使输入框变红
         document.getElementById("titleNull").style.display = ""; //显示提示信息
          return false;
        }
      }
    
    
      var ele = { 
          name: document.getElementById("name")
        };
        ele.name.onblur = function(){ //name失去焦点则检测
          checkName(ele.name.value);
        }
    
      </script>
    当不填写内容,鼠标离开输入框时,onblur事件被触发,即显示提示文字和对应的输入框边框颜色变为红色:


    填入内容后则提示消失:




    展开全文
  • js实现表单实时验证,显示提示

    千次阅读 2017-03-16 10:16:13
    对于有很多填写项目的表单,我们可能更希望在用户没有填写时或填写出错时,就即时显示提示,而不是等到提交时才进行验证。  结合js的onblur事件和style.display属性可以实现此功能。 html代码: Register ...

    对于有很多填写项目的表单,我们可能更希望在用户没有填写时或填写出错时,就即时显示提示,而不是等到提交时才进行验证。

      结合js的onblur事件style.display属性可以实现此功能。

    html代码:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Register</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
      body{margin:0;padding: 0;}
      .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
      .login legend{font-weight: bold;color: green;text-align: center;}
      .login label{display:inline-block;width:130px;text-align: right;}
      .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
      input{height: 20px;width: 170px;}
      .borderRed{border: 2px solid red;}
      img{display: none;}
    </style>
    </head>
    <body>
    <div class="login">
        <form name="form" method="post" action="register.php" >
          <p><label for="name">UserName: </label>
          <input type="text" id="name" >
          <p id="titleNull"  style="display:none;"><font style="color:red;">不可为空</font></p>  
        </form>
      </div>
     </body>
    </html>
    js控制代码:

    <script type="text/javascript">
      function hasClass(obj,cls){  // 判断obj是否有此class
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
      }
      function addClass(obj,cls){ //给 obj添加class
        if(!this.hasClass(obj,cls)){ 
          obj.className += " "+cls;
        }
      }
      function removeClass(obj,cls){ //移除obj对应的class
        if(hasClass(obj,cls)){ 
          var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
          obj.className = obj.className.replace(reg," ");
        }
      }
     
     
      function checkName(name){  //验证name
        if(name != ""){ //不为空则正确
          removeClass(ele.name,"borderRed"); //移除class,使原来的红色边框变为正常颜色
          document.getElementById("titleNull").style.display = "none"; //不显示提示信息
          return true;
        }else{ //若为空
          addClass(ele.name,"borderRed"); //添加class,使输入框变红
         document.getElementById("titleNull").style.display = ""; //显示提示信息
          return false;
        }
      }
     
     
      var ele = { 
          name: document.getElementById("name")
        };
        ele.name.onblur = function(){ //name失去焦点则检测
          checkName(ele.name.value);
        }
    
      </script>
    当不填写内容,鼠标离开输入框时,onblur事件被触发,即显示提示文字和对应的输入框边框颜色变为红色:


    填入内容后则提示消失:




    展开全文
  • 1、设置表单验证   data-options="novalidate:true"> 2、表单提交时统一验证 $('#ff').form('submit',{  onSubmit:function(){  return $(this).form('enableValidation').form('valida
    1、设置表单不验证
    
     <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
    </form>

    2、表单提交时统一验证
    $('#ff').form('submit',{
                    onSubmit:function(){
                        return $(this).form(' enableValidation').form('validate');
                    }
       });
    展开全文
  • 表单信息实时验证

    千次阅读 2018-09-13 21:14:47
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...表单信息实时验证&lt;/title&gt; &lt;meta http-equiv="Access-Control-Allow-Origin" content="*
  • Validform 账号实时验证
  • 在使用easyui验证表单的必输、格式等信息时,如果在每个input中输入 data-options="required:true",那么文本框一开始就会用红颜色提示,感觉不友好,其实验证可以放到表单提交时统一验证,如下做即可: ...
  • yii2关闭form表单实时验证

    千次阅读 2017-03-14 15:06:28
    form表单默认会在提交之前就会验证用户输入的数据是否为合法,只需要在form表单生成的时候加一个参数,就能使form表单在提交的时候验证。 $form = ActiveForm::begin(['id' => 'login-form','enableClientValidation...
  • Validform实时表单验证插件实例使用

    千次阅读 2016-10-17 15:05:43
    适用范围:所有类型网站表单验证 插件版本:v5.3.2 插件地址:http://validform.rjboy.cn/Validform/v5.3.2/Validform_v5.3.2_min.js jquery地址:http://download.csdn.net/detail/bennygreat/3861587 html...
  • JS动态即时验证INPUT表单内容是否合法
  • Validform 实时验证表单某一个元素

    千次阅读 2018-06-11 17:48:59
    一、问题 行业字段使用的是行业插件,其对应的industryId值为hidden的input,表单验证的时无法进行blur操作,导致不能实时提示信息;二、解决 行业字段使用的是行业插件,行业插件的js不能修改,所以不能模拟blur...
  • 比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码...表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行必填项不能为空验证,再进行正则表达式匹配验证。
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么只需要写好对应的验证规则...
  • asp.net验证表单与javascript验证表单都可以验证表单,孰优孰劣,如何抉择?
  • AngularJS表单验证功能

    2020-12-29 05:22:23
    在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要。  表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。  ...
  • angular8响应式表单,表单验证,异步验证 响应式表单 Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单和模板驱动表单。 响应式表单和模板驱动表单共享了一些底层构造块。 FormControl 实例用于追踪...
  • jQuery表单验证大全

    热门讨论 2009-11-17 21:04:11
    jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证
  • 表单验证插件

    2014-09-22 14:15:57
    用来做表单验证,包括用户的实时验证,ajax请求的验证
  • Javascript表单验证

    千次阅读 2019-01-06 20:09:44
    JavaScript表单验证: JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript验证内容: 验证表单数据是否为空? 验证输入是否是一个正确的email地址? 验证日期是否输入...
  • layui 表单验证案例

    万次阅读 2016-10-26 11:49:08
    文本框,手机,邮箱,textarea等格式的验证 HTML代码: 反馈主题
  • 动态添加input并动态添加新验证方式! 知识点: ...2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过。 3 用到的关键字:addField...且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y
  • 先上效果图: input框,用户输入值的方式就两种,一种是键盘输入...onkeyup进行表单验证的优点是当键盘有值输入的时候,就可以实时进行验证。页面部分:<input id="id_card" type="text" class="form-control" onkeyup
  • html 表单验证

    千次阅读 2018-12-07 12:31:36
    因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过 jQuery Validate,但是我觉得引用 jQuery Validate 太麻烦了。 我采用的表单验证不是使用 框架来实现,...
  • iView表单空格验证

    千次阅读 2018-10-16 10:51:41
    iView表单组件使用async-validator验证器对表单域中数据进行验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法...
  • EasyUI之表单验证

    千次阅读 2019-05-06 20:05:18
      当我们开发一个管理类项目的时候,EasyUI是我常用的一个jquery框架,而表单验证显然是我们必须要实现的功能,而使用基于EasyUI的验证功能就比较简便了,本文来介绍下具体的用法 EasyUI表单验证 1.官方提供的验证...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 266,853
精华内容 106,741
关键字:

表单实时验证