精华内容
下载资源
问答
  • 表单校验

    2017-06-05 20:18:45
    1.表单校验的常见内容包括验证是否为空、验证数据格式是否正确、验证数据的范 围、验证数据的长度等 2.在表单校验中通常需要用到String对象的成员,包括index()、substring()和length()等 3.表单校验中常见的两个...

    1.表单校验的常见内容包括验证是否为空、验证数据格式是否正确、验证数据的范

    围、验证数据的长度等

    2.在表单校验中通常需要用到String对象的成员,包括index()、substring()和length()等

    3.表单校验中常见的两个事件是onsubmit和onblur,常用来激发验证

    4.使用正则表达式可验证用户输入的内容

    5.定义正则表达式有两种构造形式,一种是普通方式,另一种是构造函数的方式

    6.正则表达式的模式分为简单模式和复合模式

    7.通常使用RegExp对象的text()方法检测一个字符串是否匹配某个模式

    8.String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法

    9.使用表单选择器和表单属性过滤器可以方便地获取匹配元素的表单元素

    展开全文
  • 首先我使用的是vue-cli +element Ui ,就是在表单中有上传图片环节,由于我们这边是先上传图片,提交表单的时候单独传imageUrl即可,官方表格演示中并没有表单校验图片流程,然后按照表单校验一般规则填写,无论是否...
    问题描述

    首先我使用的是vue-cli +element Ui ,就是在表单中有上传图片环节,由于我们这边是先上传图片,提交表单的时候单独传imageUrl即可,官方表格演示中并没有表单校验图片流程,然后按照表单校验一般规则填写,无论是否上传图片,都有提示:图片不能为空,但是如果上传了图片,虽然有提示,但是也能提交成功,但是,这样对用户太不友好。

    如何修改

    下面是我的form表单中截取了图片上传一小部分,如果是在新增图片时不显示点击更换,如果是修改则显示更换;不需要的请忽略;
    实现的原理: 主要是通过成功上传图片后单独清除image校验即可;

    //html 部分
    <el-form-item label="图片地址" prop="imageUrl">
              <el-upload
                class="avatar-uploader"
                :action="upLoadUrl"
                drag
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                <div v-else>
                  <i class="el-icon-upload avatar-uploader-icon"></i>
                  <p style="padding-top: 0;margin-top: 0;line-height: 16px">将文件拖到此处,或点击上传图片</p>
                </div>
              </el-upload>
              <el-upload
                v-show="editForm"
                class="upload-demo"
                :on-success="handleAvatarSuccess"
                :show-file-list="false"
                :action="upLoadUrl">
                <el-button size="small" type="primary">点击更换</el-button>
              </el-upload>
            </el-form-item>
    
    //js部分
    data(){
    	let checkImage = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('图片不能为空'));
          }else{
            callback()
          }
        };
        return{
    	// 表单校验
          rules: {       
            imageUrl: [
              { validator: checkImage,required: true }
            ],
          },
       }
    }
    
    handleAvatarSuccess(res, file) {
          this.form.imageUrl = URL.createObjectURL(file.raw);
          this.formUpLoadImgUrl = res.absoluteUrl;
          let formField = this.$refs["form"].fields;
          formField.map(i => {
            if(i.prop === 'imageUrl'){  //通过prop属性值相同来判断是哪个输入框,比如:要移除prop为'imageUrl'
              i.clearValidate();
              return false
            }
          })
        },
    

    此种方法目前解决了我的需求,如果各位大佬另有高见,欢迎指导

    展开全文
  • 表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的效性,也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。 ElementUI校验规则 ElementUI封装了...

    前言

    表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的效性,也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

    ElementUI校验规则

    ElementUI封装了组件el-form来收集、校验和提交数据,其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则,我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验,当不满足要求时会弹出message相应的提示信息。
    在这里插入图片描述

    自定义规则调用

    ElementUI提供的表单验证规则是有限的,可能无法满足我们项目的需求这时候就需要我们来自定义验证规则。我们在在data() {}中添加自定义的校验规则,然后在在data的return中通过validator引用校验规则。data() {return{}}中定义的rules要 中的 :rules 属性值相同,rules中的对象userName要与与 中的prop属性值相同。
    在这里插入图片描述

    自定义校验规则

    validate是ElementUI封装用于对整个表单进行验证的,参数是一个回调函数。该回调函数在校验结束后被调用,是否校验成功和未通过校验的字段。这个回调函数的原型为:function fun(rule, value, callback, source, options){},其中rule指向当前的规则对象,value是需要进行校验的值,callback是验证之后的执行回调,source是跟value的值一致的键值对象(可以忽略),options是个额外的配置选项(可选)。所以常见的函数定义如下,校验手机号码是否正确。
    在这里插入图片描述

    validate校验

    自定义校验方法是一个在校验结束后才会被调用回调函数,所以在提交表单的时候我们需要通过$refs来调用validate来继续自定义校验。自定义校验规则时必须保证每个分支都调用了callback方法,否则会导致el-form组件在使用validate方法时无法进入回调函数。调用validate()校验时需要prop属性绑定校验的字段名,否则无法校验v-model中绑定的值。
    在这里插入图片描述

    常用校验规则

    为了方便我们还是定义一个validation.js文件来专门定义常用的校验方法,然后导入validation.js进而使用。这里注意自定义rules时外层的message高于callback中的错误提示,所以自定义规则时建议外层勿定义message,可以用两个规则来校验内容。定义好之后在需要用到的地方直接 import 引入,然后在 rules 校验中加入即可。
    在这里插入图片描述
    附上本文用到的源码

    <template>
      <el-form
        :model="loginForm"
        autocomplete="on"
        class="login-form"
        :rules="rules"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            placeholder="请输入用户名"
            name="username"
            type="text"
            v-model="loginForm.username"
            autocomplete="on"
          />
        </el-form-item>
      </el-form>
    </template>
    <script>
    
    //JavaScript->
    rules: {  username: [    { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    }
    //JavaScript
    data(){  
        const chackLen = (rule, value, callback) => {  
             let len = value.length  
              if ( len < 3 || len > 5) {
        callback(new Error('用户名长度在3-5之间'))  
         } else {   
              callback()  
              } 
            }
       return{ 
            rules: { 
                  username: [   
                       { required: true, message: '请输入用户名', trigger: 'blur' },
                       { validator: chackLen, trigger: 'blur' }  // 自定义长度校验
                       ]
      } }
      
    methods: {  
      onSubmit() {       
         this.$refs['rulesForm'].validate(valid => {
            if (valid) {  
               //如果校验为真说明符合要求可以继续           
                
            }else{         
              //反正说明校验失败,返回对应的message       
                
                }    
                 });  
          } 
          }
                
    let matching = (value, callback, reg, message) => {  
        if (value === '' || value === undefined || value == null){   
             callback(new Error(message))  
             } else {   
                  if (!reg.test(value)) {    
                        callback(new Error(message))  
                     } else {   
                      callback()  
                        } 
     }
     }
    
    module.exports = {
        Username(rule, value, callback) {
            let reg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/
            matching(value, callback, reg, '请输入6-12位字母和数字组合')
        }, SimplePwd(rule, value, callback) {
            let reg = /^[_a-zA-Z0-9]+$/
            matching(value, callback, reg, '包含英文字母、数字及下划线组成')
        }, ComplexPwd(rule, value, callback) {
            let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/
            matching(value, callback, reg, '请输入8-20位英文字母、数字或者符号')
        }, Phone(rule, value, callback) {
            let reg = /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/
            matching(value, callback, reg, '请输入正确的手机')
        }, Email(rule, value, callback) {
            let reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
            matching(value, callback, reg, '输入正确的邮箱')
        }, IdCard(rule, value, callback) { let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 
           matching(value, callback, reg, '输入正确的身份证号码') }, Company(rule, value, callback) {
            let reg = /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/
            matching(value, callback, reg, '请输入正确的营业执照')
        }, Weixin(rule, value, callback) {
            let reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
            matching(value, callback, reg, '请输入正确的微信号')
        }, Integer(rule, value, callback) {
            let reg = /^[1-9][0-9]*$/
            matching(value, callback, reg, '请输入正确的整数')
        }, Number(rule, value, callback) { let reg = /^\d+$|^\d+[.]?\d+$/  
              matching(value, callback, reg, '请输入纯数字') }, 
              Landline(rule, value, callback) { 
            let reg = /^(\d{3,4}-)?\d{7,8}$/   
             matching(value, callback, reg, '请输入正确的座机') 
         },
              Ip(rule, value, callback) {
                   let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/  
              matching(value, callback, reg, '请输入正确的IP')
         },
             Price(rule, value, callback) { let reg = /^-?\d{1,4}(?:\.\d{1,2})?$ /  
             matching(value, callback, reg, '请输入正确的价格') 
        }, 
             BankCard(rule, value, callback) { 
            let reg = /^([1-9]{1})(\d{14}|\d{18})$/   
             matching(value, callback, reg, '请输入正确的银行卡') }
    }
    
    
    展开全文
  • 最近在学习JavaScript,因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤,需要的的朋友参考下吧
  • 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下: 表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。 而这些组件操作方式多样,...
  • 五一表单校验.html

    2020-12-04 20:48:12
    五一表单校验.html
  • 1.el-table和el-form嵌套使用表单校验 1.表格嵌套表单+input 2.el-table和el-form嵌套使用表单校验 2-1.表单的多层嵌套 2-2.动态表单---点击按钮增删一排输入框 2-3.表格中嵌套使用表单验证
    展开全文
  • taro 表单校验

    千次阅读 热门讨论 2021-01-28 10:30:10
    涉及到表单校验,查看了taro-ui的Form组件,发现并没有实现表单校验 so~安装async-validator 来实现表单校验(是一个表单的异步验证的第三方库,https://github.com/yiminghe/async-validator) 贴上代码 ...
  • Vue.js 表单校验插件

    2020-10-21 17:58:00
    主要介绍了Vue.js 表单校验插件的相关资料,需要的朋友可以参考下
  • 主要介绍了AngularJs表单校验功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 微信小程序最难实现的公共业务是什么?应该是表单校验,这篇文章主要介绍了微信小程序如何实现表单校验功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Angular模板表单校验方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这个前端的jquery的表单校验插件,使用起来很方便,可以大大的减少我们开发者对于表单校验的工作。而且支持自定义验证规则,功能强大。
  • 主要介绍了AngularJS表单校验用法,结合实例形式分析了AngularJS各种常见的表单校验功能及使用技巧,需要的朋友可以参考下
  • vant 表单校验 实现

    万次阅读 2020-02-11 21:25:14
    vant 里的input输入组件是Field,这个组件没有提供自定义校验的功能,只提供了email等特定几个值的校验。vant自身又没有form相关组件。...今天我在开发的时候,发现其实还有一个更简单的方式来实现表单校验的效果...
  • 遇到的问题 在使用iview框架时,在后端管理系统中,通常会使用到form表单组件,当然日期也通常出现在搜索框表单中,但是有时候会出现日期组件校验错误的情况... 其次,默认表单校验类型是string,但是日期组件 type...
  • 主要介绍了vue+element表单校验功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本篇文章主要介绍了Angularjs使用指令做表单校验的方法,详细的介绍了用指令做校验的方法,具有一定的参考价值,有兴趣的可以了解一下。
  • 依赖jQuery的表单校验脚本,在使用此脚本之前请先引入jQuery文件
  • 表单校验&文件下载

    2014-06-25 22:58:02
    表单校验文件下载 解压后上myeclipse可以直接运行
  • 主要为大家详细介绍了jQuery表单校验插件validator的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 清除表单校验

    千次阅读 2020-10-10 20:55:52
    当一些表单校验没通过却关闭了,等下一次再打开的时候,表单校验还是存在的,这样用户体验性很差,所以要在每次打开表单(或者关闭表单之前)的时候要清空表单校验 <el-form :model="formInfo" ref="addForm...
  • 目录表单校验插件1. 导入插件2. 基础语法3. 常用校验规则4. 校验案例a. 主要需求b. HTML 素材页面c. 实现表单检验 表单校验插件 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,...
  • angular表单校验

    2018-10-20 10:55:38
      上面的代码段就是校验代码,写在一个单独的文件中,并暴露出去,用于外部进行调用。...上面都是在讨论响应式表单校验。   下面讨论在模板式表单中,怎样校验? 要在模板式表单中进行校验,需要用指...
  • 下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 该压缩包是jQuery的form表单校验插件,demo文件夹中是其说明文档,使用方法比较简单,查看说明文档都可以快速使用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 92,055
精华内容 36,822
关键字:

表单校验