精华内容
下载资源
问答
  • bootstrapValidator表单验证使用方法

    万次阅读 多人点赞 2017-09-03 01:17:20
    bootstrapValidator表单验证使用方法

    在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件

    然后建立一个form表单,添加表单控件,表单控件必须有绝对定位,不然会报错

                <form action="" method="POST" role="form" id="form-test">
                    <legend>Form title</legend>
    
                    <div class="form-group">
                        <label for="">label</label>
                        <input type="text" class="form-control" id="" name="text" placeholder="Input field">
                    </div>
    
    
    
                    <button id="btn-test" class="btn btn-primary">Submit</button>
                </form>

    编写js文件

            $(function () {
                $("#form-test").bootstrapValidator({
                    live: 'disabled',//验证时机,enabled是内容有变化就验证(默认),disabled和submitted是提交再验证
                    excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件,比如被禁用的或者被隐藏的
                    submitButtons: '#btn-test',//指定提交按钮,如果验证失败则变成disabled,但我没试成功,反而加了这句话非submit按钮也会提交到action指定页面
                    message: '通用的验证失败消息',//好像从来没出现过
                    feedbackIcons: {//根据验证结果显示的各种图标
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        text: {
                            validators: {
                                notEmpty: {//检测非空,radio也可用
                                    message: '文本框必须输入'
                                },
                                stringLength: {//检测长度
                                    min: 6,
                                    max: 30,
                                    message: '长度必须在6-30之间'
                                },
                                regexp: {//正则验证
                                    regexp: /^[a-zA-Z0-9_\.]+$/,
                                    message: '所输入的字符不符要求'
                                },
                                remote: {//将内容发送至指定页面验证,返回验证结果,比如查询用户名是否存在
                                    url: '指定页面',
                                    message: 'The username is not available'
                                },
                                different: {//与指定文本框比较内容相同
                                    field: '指定文本框name',
                                    message: '不能与指定文本框内容相同'
                                },
                                emailAddress: {//验证email地址
                                    message: '不是正确的email地址'
                                },
                                identical: {//与指定控件内容比较是否相同,比如两次密码不一致
                                    field: 'confirmPassword',//指定控件name
                                    message: '输入的内容不一致'
                                },
                                date: {//验证指定的日期格式
                                    format: 'YYYY/MM/DD',
                                    message: '日期格式不正确'
                                },
                                choice: {//check控件选择的数量
                                    min: 2,
                                    max: 4,
                                    message: '必须选择2-4个选项'
                                }
                            }
                        }
                    }
                });
                $("#btn-test").click(function () {//非submit按钮点击后进行验证,如果是submit则无需此句直接验证
                    $("#form-test").bootstrapValidator('validate');//提交验证
                    if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
                        alert("yes");//验证成功后的操作,如ajax
                    }
                });
            });





    展开全文
  • 表单验证的实现方法

    千次阅读 2020-06-01 18:11:56
    简单的表单验证 两种验证方式: 1.在表单提交时进行验证,sumbit时 2.在表单控件失去焦点时进行验证 表单验证逻辑一般写在表单提交之前,html5也新增了表单验证形式,表单验证可以使用正则表达式 ...

    简单的表单验证

    A.两种验证方式:
    1.在表单提交时进行验证,sumbit时
    2.在表单控件失去焦点时进行验证
    表单验证逻辑一般写在表单提交之前,html5也新增了表单验证形式,表单验证可以使用正则表达式
    B.表单验证一些必需的验证项目:
    1.用户是否填写表单中必填项目
    2.用户是否已经输入合法的日期
    3.用户是否已经输入合法的邮件地址
    4.用户是否已经在数据域(numeric field)中输入合法的文本
    等等
    C.如果表单相应的项目并没有填好的话,那么我们需要弹出一个警示框。有以下几种情况:1.用户此行内容未填写,想跳过此行,先去填写下面的内容,需要在表单提交时,提醒用户有表单未填写完毕,不能被提交,并将光标移至相应处2.此行内容未填写完毕,不能跳过,光标不能移动,此种方式交互性能不是特别好,不推荐使用
    下面是一个简单的数字名用户表单验证:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>简单表单验证</title>
    </head>
    <body>
       <form action="#">
       		<table>
       				<tr>
       					<td>姓名:</td>
       					<td><input type="text" name="txtName" id="textName" placeholder="文本不能少于6个数字"></td>
       				</tr>
       				<tr>
       				  <td colspan="2">
       				  <input type="submit" value="提交">
       				  <input type="reset" value="重置">
       				  </td>
       				</tr>
       		</table>
       </form> 
       <script>
       			window.οnlοad=function(){
       			//先拿到我们的表单
       			var frm=document.forms[0];
       			//用户名的长度如果发生错误,我们要在该行内容后面给其加一个内容,提示用户填写错误,并把相应的错误内容框加红
       			var textNameMag=document.createElement('span');
       			textNameMag.innerHTML="姓名的长度必须在6到15个数字之间";
       			textNameMag.style.color="red";
    //在表单进行提交时,必须要进行验证
    frm.οnsubmit=function(e){
    //获取文本框的内容
    var txtContent=document.getElementById('textName');
    //写一个正则表达式,你填入的数字必须在6到15之间
    var txtContentRegExp=/\w{6,15}/gi;
    if(txtContentRegExp.test(txtContent.value)){
    //此处成功,删除我们错误的文本消息框
    txtContent.parentNode.removeChild(textNameMag);
    return true;
    }else{
    //检验失败,用户填入的文本不符合要求
    txtContent.parentNode.appendChild(textNameMag);return false;
    }
       			}
       			}
       </script>
    </body>
    </html>
    

    实现效果如下:
    在这里插入图片描述

    展开全文
  • Validation-jQuery表单验证插件使用方法

    千次阅读 2013-12-12 17:29:36
    jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 使用前的布置 说明:需要JQuery版本:1.2.6+ ...

    作用

    jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。

    使用前的布置

    说明:需要JQuery版本:1.2.6+

    步骤:

    要导入相应的jQuery.js与jquery.validate.js文件
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>

    在相应的字段上指定验证规则
    名称 *<input type="text" name="loginName" class="required">
    其中class="required"代表本字段必须要输入数据

    指定要对表单进行验证
    <script type="text/javascript">

    $(function(){

    $("#testForm").validate();

    });

    </script>

     

    效果如下图:

     

     

     

     

     

     

     

    基础知识

    指定验证规则的方式

    把验证规则写到字段元素的class属性中

    例:

    名称 * <input type="text" name="loginName" class="required"><br>

    密  *  <input type="password" name="password" class="required"><br>

    再次输入 <input type="password" name="password2"

    class="{equalTo: '[name=password]'} required"><br>

    生日   <input type="text" name="birthday" class="dateISO"><br>

    E-mail *<input type="text" name="email" class="email"><br>

    PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">

     

    说明:

    如果使用class="{key:value,…}"的方式,必须引入:jquery.metadata.js

    表单字段的name不能重复,否则所配置的验证不起作用。

    调用validate()方法时传递字段的验证规则

    $(function() {

    $("#testForm").validate({

    rules: {

    loginName:{

    required: true,

    minlength: 2

    }   ,

    password: {

    required: true

    },

    password2: {

    equalTo: "input[name=password]"

    }

    }

    });

    });

    内置的验证规则

     

     

     

    required:true              

    必填字段

    remote:"check.php"         

    使用ajax方法调用check.php验证输入值

    email:true                 

    必须输入正确格式的电子邮件

    url:true                   

    必须输入正确格式的网址

    date:true                  

    必须输入正确格式的日期

    dateISO:true                

    必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性

    number:true                

    必须输入合法的数字(负数,小数)

    digits:true                

    必须输入整数

    creditcard:                

    必须输入合法的信用卡号

    equalTo:"#field"          

    输入值必须和$(“#field”)相同

    accept: "gif|png|jpg"

    输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开

    maxlength:5               

    输入长度最多是5的字符串(汉字算一个字符)

    minlength:3              

    输入长度最小是3的字符串(汉字算一个字符)

    rangelength:[5,10]        

    输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

    range:[5,10]              

    输入值必须介于 5 和 10 之间

    max:5                      

    输入值不能大于5

    min:10                    

    输入值不能小于10

     

     

    说明:

    remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数(以字段name为key)传递过去。

    某些属性值中的引号不能省略,否则出错。如accept、equalTo等。

     

    remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){

    $.ajaxSetup ({

    cache: false //关闭AJAX相应的缓存

    }); // 关闭缓存功能

    });

    添加

     

    修改错误信息提示位置:

    修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。 
        具体使用方法: 
    var validator = $("#myContainerForm").validate({ 
    focusCleanup:true,//clear the error message when the error element get focus again. 
    onkeyup:false, 
    errorPlacement: function(error, element) {  
    showErrorMesssgeDiv(error,element); 
       },   
    rules:{ 
           name:{ 
                  required: true 
           } 
    }, 
    messages: { 
           name:{ 
                  required:populateErrorMessage($("#errorRequiredMessage").val(),               $("#containerNameTitle").val()) 
           }      

    });

    自定义验证规则

    除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:

    jQuery.validator.addMethod("name",function,message)

    其中:

    name为验证规则的名称

    function定义验证的规则。参数有?。返回值为?。

    message是验证失败时的提示信息。

    指定错误提示内容

    更改默认的提示内容

    jQuery.extend(jQuery.validator.messages, {

    required: "必填字段",

    remote: "请指定一个不重复的值",

    email: "请输入正确格式的电子邮件",

    url: "请输入合法的网址",

    date: "请输入合法的日期",

    dateISO: "请输入合法的日期 (ISO).",

    number: "请输入合法的数字",

    digits: "只能输入整数",

    creditcard: "请输入合法的信用卡号",

    equalTo: "请再次输入相同的值",

    accept: "请输入拥有合法后缀名的字符串",

    maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),

    minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),

    rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),

    range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),

    max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

    min: jQuery.validator.format("请输入一个最小为 {0} 的值")

    });

    个别表单改变提示内容(只对当前表单有效)

    方法一:

    <input type="file" name="parResource"

    class="{required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'}}">

     

    方法二:

    $(function() {

    $("#testForm").validate({

    messages:{

    loginName: {

    required: "必选字段2"

    },

    email: {

    required: '必选字段22',

    email: "请输入正确格式的电子邮件2"

    }

    }

    });

    });

    改变错误消息显示样式

    指定label.error的样式就可以了,如下:

    <style type="text/css">

    label.error{

    margin-left: 10px;

    color: red;

    }

    </style>

     

    说明:label.error指class为error的label元素,如:<label for="resource" class="error">

    扩展使用

    怎么让错误提示信息显示到指定的位置



    展开全文
  • 表单验证实现方法

    2016-08-30 19:18:56
    每个元素进行验证,onblur事件 当每个元素失去焦点时进行验证,如有错误,给出提示 当元素获取焦点时,onfocus事件 -当元素获得焦点时,需要将错误信息清除 提交按钮事件onsubmit需要验证所有表单元素
    • 每个元素进行验证,onblur事件
      • 当每个元素失去焦点时进行验证,如有错误,给出提示
    • 当元素获取焦点时,onfocus事件
      • 当元素获得焦点时,需要将错误信息清除
    • 提交按钮事件onsubmit需要验证所有表单元素

    【解决方案】:

    • 每个元素的onblur事件写个验证方法

    • 验证是否为空,格式是否正确(正则表达式)
      用户名格式验证

    function checkUserName(){
    //获取输入的值
    var username=document.getElementById
      (“username”).value;
      //是否为空
      if(username.length==0){
       var msg="用户名不能为空!";
        showError('nameerror',msg);
        return false;
      //格式是否正确(要求开头是字母,其余可以是字母数字,下划线,长度6-20位)
      //正则表达式
          /^[a-zA-Z][a-zA-Z0-9_]{5,19}$/;
          if(pattern.test(username))==flase{
           var msg="用户名格式非法";
           return flase;
          }
      return true;
      }
    }
    //提示错误信息
    function  showError(eid,msg){                                       document.getElementById(eid).innerHTML=msg;
    }
    • 每个元素的onfocus事件清除错误信息的方法
      只写一个方法,接受错误提示层id
    function clearerreid){
         document.getElementById(eid).value="";//用于清除表单元素
         //document.getElementById(eid).innerHTML="";//清除div等素
     }
    • onsubmit
    if(check1()==true&&check2()==true&&check3()==true){   
    
     }
    展开全文
  • layui 表单验证案例

    万次阅读 2016-10-26 11:49:08
    文本框,手机,邮箱,textarea等格式的验证 HTML代码: 反馈主题
  • 至于基本的表单验证呢,统一写在rules 【表单验证规则】中即可; 第一种: //直接在表单上进行验证 <el-form-item label="跳过行数" prop="ignoreLines" :rules="[{ required: true, validator: checkNumber....
  • 表单验证技术

    千次阅读 2018-07-07 10:32:52
    表单验证技术本章目标使用表单事件和脚本函数实现表单验证使用字符串对象和文本框控件常用属性和方法实现客户端验证什么时候需要表单验证减轻服务器的压力保证输入的数据符合要求表单验证的内容日期是否有效或日期...
  • 使用 jQuery Validate 进行表单验证

    万次阅读 多人点赞 2018-06-13 21:31:18
    jQuery Validate简介jQuery Validate 插件提供了强大的表单验证功能,能够让客户端表单验证变得更简单,同时它还提供了大量的可定制化选项,以满足应用程序的各种需求。该插件捆绑了一套非常有用的验证方法,包括 ...
  • HTML5中表单验证的8种方法

    万次阅读 2016-11-07 14:43:52
    在深人探讨表单验证之前,让...但是真正的表单验证什么? 是一种优化。 之所以说表单验证是一种优化,是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面,设计表单验证是为了让W
  • JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件...
  • vue 表单验证 时间赋值之后 自动验证的解决方法 方法: 因为赋值之后自动触发了change,验证事件改为blur就可以了
  • html 表单验证

    千次阅读 2018-12-07 12:31:36
    因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过 jQuery ...我想实现表单验证,但是写js又太麻烦,有没有简单实用又灵活的方法 需求:用户名限制长度...
  • validate表单验证添加自定义方法

    千次阅读 2018-10-11 15:21:08
    第二个是改规则的实现部分,需要验证哪些条件在这里写验证方法,当return返回true时代表验证条件符合不触发。 第三个是提示消息。 其中this.optional(element)表示表单控件的值不为空时才会触发。空字符串也会触发...
  • TP5.1+ 中的验证器,个人觉得就是 Laravel/Lumen 或是 CodeIgniter 中的表单验证. 1. 验证器 我们可以以下指令快速生成验证器 php think make:validate dev/Test  以下是我生成的 User 验证器示例 &...
  • 一般表单的提交的都是button然后ajax来提交,但是button就不能触发html5的自带表单验证submit的话就又会直接提交表单。 下面介绍一种方法: submit来提交表单,然后在js中监听submit方法ajax...
  • 表单统一验证方法

    千次阅读 2013-07-01 15:13:37
    做项目时,有时会需要很多的表单,每个表单一个一个的写验证方法会很麻烦,就试着写了一个能统一验证方法,只需在每个表单的页面复制粘贴即可,仅供参考。 1,表单: /pavoutypedefine.do?action=...
  • Javascript表单验证

    千次阅读 2019-01-06 20:09:44
    JavaScript表单验证: JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript验证内容: 验证表单数据是否为空? 验证输入是否是一个正确的email地址? 验证日期是否输入...
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么只需要写好对应的验证规则...
  • Vant表单验证使用

    千次阅读 多人点赞 2021-01-25 23:38:15
    Vue框架中快速上手vant组件库中的表单验证和自定义表单验证
  • 表单验证rules

    2019-07-06 11:23:36
    表单验证rules 问题一: 必须是对应输入框绑定的字段名,取别名将不能正常验证表单数据 问题二: 按钮事件传入的参数要注意引号,如果没有使用“ ”传过去,运行时将会不能识别validate方法,报错信息如下,点击...
  • iview的 Select下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过 1, 问题显示如下图 html代码 <Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100"> <...
  • 1、struts验证  struts2提供了一套数据验证框架,只需要对每个要验证的数据项提供要验证的配置信息即可。具体写法如下:假设有一个Action类,名字叫xxxAction,要经过这个Action进行业务逻辑处理之前,必须要对从...
  • validationEngine是一个很好的表单验证插件(jQuery),提示界面非常友好,默认配置基本能满足用户需求,但是有时候只想在提交表单时才进行验证,而在blur事件时不需要验证,这就需要使用到取消验证方法。...
  • Bootstrap4表单验证(纯JavaScript方法

    万次阅读 2018-05-24 13:16:21
    Bootstrap4表单验证 网上bootstrap4表单验证的文章实在太少了,当初做的时候老是摸不着头脑,现在我来分享一下自己的做法,希望小伙伴们少走点弯路 一、示例代码 &amp;lt;!DOCTYPE html&amp;gt; &...
  • 什么表单验证

    2017-05-24 18:24:38
    获取表单标签的值,对比该值是否为空或者是否和你设定的值的标准相符(比如:输入长度,字符限制等)。 如果比对有误则进行对用户的 提示(比如弹出窗口),...常有javascript、jsp等等,现在有现成的表单验证插件。
  • treeselect 表单验证解决方法

    千次阅读 2019-07-17 20:54:00
    源地址:https://www.jianshu.com/p/7b2c1194b358 1首先先绑定一个事件 2 声明规则 3 自定义规则中改变treeselect框颜色 转载于:https://www.cnblogs.com/wxqworld/p/11203603.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 260,069
精华内容 104,027
关键字:

表单验证一般用什么方法