精华内容
下载资源
问答
  • jquery 表单验证大全并以弹出形式提示信息
  • 表单验证的实现方法

    千次阅读 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>
    

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

    展开全文
  • //18位身份证需要验证最后一位校验位 if (code.length == 18) { code = code.split(''); //∑(ai×Wi)(mod 11) //加权因子 var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //校验位 ...

    实例作用:帮助开发者获取input、text以及页面data数据进行提交
    适用范围:小程序的所有基础库

    wxml中的绑定

     <textarea placeholder="文本类型"   bindblur='no_focus' bindfocus="focus" data-name= "c"></textarea>
     <input placeholder="input类型"  bindblur='no_focus' bindfocus="focus" data-name= "p"></input>
    其他类型可以通过赋值的形式进行赋值传递 this.data.formData;
    

    绑定事件

    focus(e) {
          let name = e.currentTarget.dataset.name
          let value = e.detail.value;
          this.setData({
            ["formData." + name ]: value
          })
        },
    
        no_focus(e) {
          let name = e.currentTarget.dataset.name
          let value = e.detail.value;
          this.setData({
            ["formData." + name ]: value
          })
        },
    

    验证类

    function checkPhone(string){
    
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (string==undefined) {
        return false;
      } else if (string.length < 11) {
        return false;
      } else if (!myreg.test(string)) {
        return false;
      } else {
        return true;
      }
    }
    
    function checkRequired(string){
      if(string==undefined){
        return false;
      }else{
        return true;
      }
    }
    
    function checkCardId(string){
      var code = string;
    
      var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
      var tip = "";
      var pass = true;
      var reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
      if (!code || !code.match(reg)) {
        tip = "身份证号格式错误";
        pass = false;
      } else if (!city[code.substr(0, 2)]) {
        tip = "地址编码错误";
        pass = false;
      } else {
        //18位身份证需要验证最后一位校验位
        if (code.length == 18) {
          code = code.split('');
          //∑(ai×Wi)(mod 11)
          //加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          //校验位
          var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
          var sum = 0;
          var ai = 0;
          var wi = 0;
          for (var i = 0; i < 17; i++) {
            ai = code[i];
            wi = factor[i];
            sum += ai * wi;
          }
          var last = parity[sum % 11];
          if (parity[sum % 11] != code[17]) {
            tip = "校验位错误";
            pass = false;
          }
        }
      }
      console.log(pass)
      if (pass) { return true }
      if (!pass) return false;
    
    }
    
    module.exports = {
      checkPhone,
      checkRequired,
      checkCardId
    }
    

    提交数据

    import * as verify from "../../utils/verify";
    Page({
      data: {
        formData: ''
      },
      submitForm:function(){
        let { tabId, tabTitle } = this.data;
        let { content } = this.data.formData
    
        if (!verify.checkRequired(tabId)) {
          return app.myToast('请选择反馈类型');
        }
    
        if (!verify.checkRequired(content)) {
          return app.myToast('请选择反馈内容');
        }
    
      }
    })
    
    展开全文
  • Struts2 表单验证与验证框架

    千次阅读 2018-07-21 00:00:33
    如果按照以前的servlet方法,显而易见是非常麻烦的,我们既要获取表单数据,又要进行String类型的表单数据进行数据类型转换,再进行数据合法性验证,然后还要将非法数据的提示信息打印到页面上提示用户输入非法,这...

    表单数据验证是很常见的功能,通常前端页面会有一次 js验证,但是后台也需要进行一次验证,这不依赖于前台验证,是保险的做法。
    同时,我们后台验证输入数据的合法性,如果按照以前的servlet方法,显而易见是非常麻烦的,我们既要获取表单数据,又要进行String类型的表单数据进行数据类型转换,再进行数据合法性验证,然后还要将非法数据的提示信息打印到页面上提示用户输入非法,这显得很忙,很累。
    因此,Struts2为我们提供了一些数据验证手段,特别是Struts2的验证框架, 可以有效为我们减少重复性的操作,非常值得学习。


    1.Action重写的validate()方法或使用validateXXX()方法

    validate的意思就是验证。我们的Action通常会集成ActionSupport这个类,这个类有很多有用的方法,其中,validate()验证方法就是其中之一。validate()方法会在action前自动执行。
    这里写图片描述

    这样重写validate()方法后,对于Action里的任何方法,都会先执行validate()方法验证。实际上,一个Action里会有很多个方法,但是并不是每个方法都需要同样的验证方式,因此,就出现了根据方法不同设定不同验证方法的方式。
    validateXXX(),可以针对特定的方法使用特定的验证方法,其余没有什么变化。这个方法直接定义即可,同样会在XXX()方法前执行验证。
    如果两个验证方法都存在,执行顺序是先执行validateXXX(),再执行通用的validate()方法。

    validateAction

    public class ValidateAction extends ActionSupport {
        private String username;
        private String password;
    
        @Override
        public String execute() throws Exception {
            return super.execute();
        }
    
        public String test() throws Exception{
            return "success";
        }
    
        public void validateTest(){
            System.out.println("test单独验证中");
            if(getUsername()==null||"".equals(getUsername().trim())){
                this.addFieldError("usernameMsg", "用户名不能为空!");
            }else {
                Pattern p = Pattern.compile("\\{6,20}");
                Matcher m = p.matcher(getUsername().trim());
                if(!m.matches()){
                    this.addFieldError("usernameMsg","用户名有下划线,字母,数字构成,长度6-20");
                }
            }
        }
    
    
        @Override
        public void validate() {
            System.out.println("全局验证中");
            if(getUsername()==null||"".equals(getUsername().trim())){
                this.addFieldError("usernameMsg", "用户名不能为空!");
            }else {
                Pattern p = Pattern.compile("\\{6,20}");
                Matcher m = p.matcher(getUsername().trim());
                if(!m.matches()){
                    this.addFieldError("usernameMsg","用户名由下划线,字母,数字构成,长度6-20");
                }
            }
    
            if(getPassword().trim().length()==0){
                this.addFieldError("passwordMsg","密码不能为空!");
            }else{
                int s = getPassword().trim().length();
                if(s<6 || s>30){
                    this.addFieldError("passwordMsg","密码长度应在6-30之间");
                }
            }
        }*/
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    }

    login.jsp

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="s" uri="/struts-tags" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <%--用于输出提示信息,必须的--%>
        <s:fielderror></s:fielderror>
    
        <s:form name="form1" action="validateAction.action" method="post" validate="true">
            <s:textfield name="username" label="用户名"/>
            <s:textfield name="password" label="密码"/>
            <s:submit value="登陆"/>
        </s:form>
    </body>
    </html>

    strtus.xml片段

    <action name="validateAction" class="com.zsb.action.ValidateAction" method="test">
                <result name="success">success.jsp</result>
                <!--配合validate方法的result,确定验证失败后的去向-->
                <result name="input">validateLogin.jsp</result>
    </action>

    2. 使用Struts2验证框架

    尽管使用validate()方法比起自己实现验证要方便的多,但是依然存在代码不能重用的缺点,很多aciton方法都需要同样的验证,但又要在不同的action里重复写多次validate()方法。
    因此,就出现了Struts2的验证框架。
    这里写图片描述
    本来,还以为很简单的,但是,使用了校验框架后,却一直没有效果。
    对于校验文件的头部,我在struts2-core的包里找到了。

    校验文件:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!--这个头部最好到struts2-core里复制-->
    <!DOCTYPE validators PUBLIC
            "-//Apache Struts//XWork Validator 1.0.3//EN"
            "http://struts.apache.org/dtds/xwork-validator-1.0.3.dtd">
    <!--有两种方式,这里使用字段校验,是针对一个字段列举所有的需要的校验器,
    其实是一样的,只是以谁为中心,另一种是非字段校验,是针对一个校验器列举所
    有的需校验字段-->
    <!--strtus2内置了很多校验器,也可以会用正则表达式。这里只列举了
    非空字符串验证器,字符串长度验证器-->
    <validators>
        <field name="username">
            <field-validator type="requiredstring">
                <param name="trim">true</param>
                <message>用户名不能为空</message>
            </field-validator>
        </field>
        <field name="password">
            <field-validator type="requiredstring">
                <message>密码不能为空</message>
            </field-validator>
            <field-validator type="stringlength">
                <param name="minLength">6</param>
                <param name="maxLength">15</param>
                <message>密码长度6-15位</message>
            </field-validator>
        </field>
    </validators>

    目录:
    这里写图片描述

    struts.xml配置(没有变动):

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE struts PUBLIC
            "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
            "http://struts.apache.org/dtds/struts-2.5.dtd">
    <struts>
        <package name="login" namespace="/" extends="struts-default">
            <action name="validateAction" class="com.zsb.action.ValidateAction">
                <result name="success">success.jsp</result>
                <result name="input">validateLogin.jsp</result>
            </action>
        </package>
    </struts>

    对于struts2,我了解到它出现了两次高危漏洞,就算以后再用,也肯定要升级到2.5的,因此暂时没有试验低版本struts2。

    展开全文
  • 在平常的页面当中,我们经常用到表单和表单验证表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者,在这里贴下我的菜鸟代码。
  • 重置表单验证 清除表单校验信息

    千次阅读 2020-11-02 17:03:23
    在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原来的数据和验证信息一直保留 百度的时候,方法有很多,基本都是改js文件, 无意中看见一个超级简单的方法 Vue给了一个特殊属性 :key ,详细可以参照vue...

    重置表单验证 清除表单校验信息

    提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在,这种就很烦,用户体验有点差,
    在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原来的数据和验证信息一直保留
    比方说重复打开
    百度的时候,方法有很多,基本都是改js文件,
    无意中看见一个超级简单的方法

    Vue给了一个特殊属性 :key ,详细可以参照vue文档,

    Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 可以用于强制替换元素/组件而不是重复使用它。只需要保证每次生成的 key 值不一样,就会重新渲染。

    在这里插入图片描述

    用 +new Date() 时间戳生成一个每次都不一样的值,这样就可以实现每次重新渲染而不是重复使用。 但是会有一些性能问题,总体来说,个人感觉比较方便吧

    new Date 前面加上 + 是把它转换成Number类型。

    原文参照地址 http://www.ihref.com/read-18437.html
    参照的这个老哥的
    性能问题就是输入框可能只能输入一次,因为每次输入都会重置一下key值,每输入一次就会失焦。

    this.$nextTick(() => {
                    this.$refs.addform.resetFields(); //等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields(),去除验证
                });
    

    简单一点的方法使用
    this.$nextTick 每次打开的时候调用一次
    element-UI之表单校验—关闭弹窗后,重新打开弹窗,清除提示消息

    展开全文
  • 前端:简述表单提交前如何进行数据验证 通常在提交表单数据时,我们会对数据进行验证,例如某些字段是必填字段,不能为空,这时应该如何做呢?有如下三种方法: 一、在button的submit事件进行判断 <button type=...
  • Laravel表单验证,验证规则

    千次阅读 2019-12-11 17:22:03
    1 表单校验 检查应用程序的基底控制器 (App\Http\Controllers\Controller) 类你会看到这个类使用了 ValidatesRequests trait。这个 trait 在你所有的控制器里提供了方便的 validate 验证方法。 validate 方法会接收 ...
  • EasyUI之表单验证

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

    千次阅读 2019-06-14 16:02:37
    表单内容添加一般都是在弹出框中进行编辑、修改、新增的 如以下这段编辑代码: <!--编辑菜单Start--> <Modal :mask-closable="false" v-model="editMenuVisible" title="编辑菜单" ><Form :model=...
  • jQuery实现表单验证

    万次阅读 多人点赞 2019-04-24 22:13:35
    1.基于html表单,利用jQuery实现表单验证功能。 2.html基本结构和样式: 3.html代码: <!DOCTYPE ...
  • html 表单验证

    千次阅读 2018-12-07 12:31:36
    因为最近在做一个项目,需要实现前端表单验证,而这些只是简单的非空和数字之类的简单验证,可能大家都听说过 jQuery Validate,但是我觉得引用 jQuery 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="*
  • jQuery Validate表单验证实例

    热门讨论 2016-05-26 07:52:31
    实例是用jQuery的validate插件做的登陆表单验证,效果还不错,代码部分可以参见我写的这篇博客:http://blog.csdn.net/eson_15/article/details/51497533
  • 1、官网介绍表单验证使用https://element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng 2、所遇到的问题,当字段是数字类型的时候,输入input后,验证不通过 原因是 el-input默认值的类型是字符串...
  • 如何清除Form 表单验证二次弹出表单 清除验证上次提示信息 二次打开表单,验证提示信息还在,如何解决 话不多说,直接上代码 在弹出表单方法内加入下面代码即可 this.$nextTick(()=>{ this.$refs.form....
  • vue表单验证自定义验证规则

    万次阅读 2019-04-12 17:15:49
    写的验证规则放图: 样式代码: <div class="info" v-if="openslist"> <h2 class="info-h">人大代表建议办理情况反馈表</h2> <el-form ref="stateForm" :model="stateForm" cla...
  • 一、表单验证 <a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}" > <a-form-model-item label="密...
  • Laravel 表单验证常用的验证规则和示例 <?php namespace App\Http\Controllers; use App\Models\Users; use Illuminate\Support\Facades\Validator; use Symfony\Component\HttpFoundation\Request; class ...
  • HTML简单注册界面——含表单验证

    万次阅读 多人点赞 2018-10-28 14:43:47
    最近学习HTML表单,感慨万千。虽然看起来好像不难学,但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面,只有“注册账号、密码、重输密码”三个文本框,还包含了原生JavaScript验证。(记一下,也...
  • Vue快速实现通用表单验证

    千次阅读 多人点赞 2019-11-26 17:10:54
    本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...
  • angular8响应式表单,表单验证,异步验证 响应式表单 Angular 提供了两种不同的方式来创建表单处理用户输入:响应式表单和模板驱动表单。 响应式表单和模板驱动表单共享了一些底层构造块。 FormControl 实例用于追踪...
  • iView表单验证

    万次阅读 2019-06-07 11:00:33
    首先对我是用的环境进行一下说明: vue-cli + iview; 安装好 iview 组件库,...Form表单的使用: 绑定数据 // 接受数据的对象 data(){ return{ userInfo: { username: '', password: '', captcha: ''...
  • Javascript表单验证

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

    千次阅读 2021-04-20 09:33:09
    标签:van Vant form 验证 验证码 表单 message 一 、使用方法 表单校验 1.1 用 van-form 包住 1.2 在 van-field 上要有 v-model=“变量” 和 绑定rules属性 :rules=“rules变量” rules变量:[ { // 是否必填 ...
  • uniapp表单验证

    千次阅读 2020-11-04 00:11:25
    if(checkRes){ uni.showToast({title:"验证通过!", icon:"none"}); }else{ uni.showToast({ title: graceChecker.error, icon: "none" }); } }, // 重置表单 formReset: function(e) { console.log('...
  • input表单验证提示信息不消失

    千次阅读 2020-09-09 11:18:59
    当我点击取消后,表单验证的提示信息不消失,类似下图这种 此时,你要确保你的prop 和 v-model 里字段名称保持一致,就是下图的那俩字段; 然后,如果prop和v-model是一样的但是提示信息没有消失,程序在点击...
  • 响应表单验证 ng-zorro示例 手机号 手机号 手机号" greatMobile> *ngIf="form.get('mobile').dirty && form.get('mobile').errors"> {{form.get('mobile').errors.mobile.errorMsg}} ...
  • 用JavaScript实现简单的表单验证

    千次阅读 多人点赞 2019-10-15 12:37:30
    用JavaScript实现一个简单的表单验证: JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 JavaScript验证内容: 验证用户名是否为空; 验证用户名是否在6-14之间; 验证密码是否为空...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 265,047
精华内容 106,018
关键字:

表单信息验证