精华内容
参与话题
问答
  • 主要介绍了vue表单验证你真的会了吗?vue表单验证(form)validate,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue表单验证插件

    2019-08-10 01:39:36
    在使用vue做项目的过程中,做表单验证通常需要事件绑定、数据双向绑定等才能完成一个验证操作,多个验证往往会有重复代码,所以就想写一个表单验证插件。
  • VUE表单验证.txt

    2020-01-13 11:02:56
    文档包含了常见的表单验证规则,包括是否合法IP地址、是否手机号码或者固话、是否固话、是否手机号码、是否身份证号码、是否邮箱、合法url、自动检验数值的范围、验证数字输入框最大数值、验证是否1-99之间、验证...
  • vue表单验证

    万次阅读 2016-11-29 23:23:55
    最近在做vue的项目,遇到表单验证的问题,验证手机,身份证号,护照号,必填选填等 ------------------------------------------------------------------------- 改别人的代码,刚开始搞不懂用的什么组建,有两个...

    最近在做vue的项目,遇到表单验证的问题,验证手机,身份证号,护照号,必填选填等

    -------------------------------------------------------------------------

    改别人的代码,刚开始搞不懂用的什么组建,有两个

    vue-validator  和vue-form

    在网上找了相关正则表达式,写自定义的验证的回调函数,按照文档来,也不难,vue-validator虽然有中文文档,但是自定义验证这块看着有点醉,最后选择了vue-form


    期间又遇到了样式显示不出来的问题,验证不通过时用红色提示,没去研究组建里面的东西
    在DOM中看到验证通过与不通过分别是什么class 然后手写补充。。
    .vf-invalid-customValidator{
      border-bottom: 1px solid #F44336 !important;
      box-shadow: 0 1px 0 0 #F44336 !important;
    }

    还遇到一个问题:按钮disabled失效,即使设置了disabled也可以点击
    通过搜索,知道最新版本的vue已经解决了这个问题,为了项目不大改,做了如下修正
    a.waves-effect.waves-light.btn(@click='signUp', v-bind:disabled='myform.$invalid' v-if="!myform.$invalid") 注册{{myform.$invalid}}
    a.waves-effect.waves-light.btn(v-bind:disabled='myform.$invalid' v-if="myform.$invalid") 注册{{myform.$invalid}}
    思路是一个绑定事件,一个不绑定事件,控制哪个给用户显示

    展开全文
  • vue表单验证.zip

    2019-10-17 11:37:54
    Vue -- iview Form表单验证、以及数据回显 ; Select 选择器 单选验证、以及单选之后获取整个对象的数据(表单默认选择的是Value) DatePicker 日期选择器 type="datetimerange" 表单验证、以及数据回显
  • vue 表单验证

    千次阅读 2019-01-26 11:25:38
    整理一下表单验证。要过接口。步骤如下: <el-form ref="valObj" :model="valObj" :rules="rules"&...

    整理一下表单验证。要过接口。步骤如下:

    1. <el-form ref="valObj" :model="valObj" :rules="rules">
      注意ref 和 rules ,是必须的。 model的valObj是绑定的对象,同ref的valObj。
    2. 给需要验证的表单加prop=“字段名”,如下:
                 <el-form-item label-width="150px" label="名称" prop="name">
                    <el-input v-model="valObj.name" size="mini" />
                  </el-form-item>
    
    1. 写规则:
      写在data() { return { rules: ............. } }里面
         rules: {
            name: [{ validator: validateParking, required: true, trigger: 'blur' } ],
            code: [ { validator: validateParking, required: true, trigger: 'blur' } ],
            truckCompany: { // 树状下拉框 - 公司的选择
              id: [{ validator: companyCheck, required: true, trigger: 'change' }]
            },
            phone: [  { validator: phoneCheck, required: true, trigger: 'change' } ]
          }
    

    trigger => 代表验证的触发方式,分别有 blur、change、focus。。。常用的就是blur和change。

    1. 若是不需要走接口进行判断之类的,就直接写验证方法啦:
      所有的验证方法都写在data里,return外:data(){ var companyCheck = ... return{ }}
        //  公司的选择验证
        var companyCheck = (rule, value, callback) => {
          if (value === 0 || value === '') {
            callback(‘请选择公司’)
          } else {
            callback()
          }
        }
        // 手机验证
        var phoneCheck = (rule, value, callback) => {
          if (!(/^1(3|4|5|7|8)\d{9}$/.test(value))) {
            callback('请输入正确的手机号')
          } else {
            callback()
          }
        }
    
    1. 若是需要走接口判断的,如我的项目中,名字和代码要保证唯一,所以走后台接口判断。
      同时,由于我的验证都在添加和编辑的弹出框中,所以以下分两个部分。在这里就需要校验对比数据啦~
      首先,初始化要进行对比的字段,在return中:
          // 校验对比数据
          validateParkingData: {
            name: '',
            code: ''
          }
    

    然后,写名字和代码的验证(和以上验证方法在同一处):

         // 校验
        var validateParking = (rule, value, callback) => {
          if (value === '') {
            if (rule.field === 'name') {
              callback(‘请输入名字’)
            } else if (rule.field === 'code') {
              callback(‘请输入代码’)
            }
          } else if (this.validateParkingData[rule.field] !== value) {
            var postData = {}
            postData[rule.field] = value
            // isExistParking 是接口的名字
            isExistParking(postData).then(response => {
              if (response.data) {
                if (rule.field === 'name') {
                  callback(‘该名称已存在’)
                } else if (rule.field === 'code') {
                  callback(‘该代号已存在’)
                }
              } else {
                callback()
              }
            })
          } else {
            callback()
          }
        }
    

    添加的方法中:

    // 点击添加按钮:
        add() {
       //  this.$nextTick() => 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新
       //   this.nextTick(callback),当数据发生变化,更新后执行回调。
       //   this.$nextTick(callback),当dom发生变化,更新后执行的回调。
          this.$nextTick(() => {
            if (this.$refs['valObj'] !== undefined) { // 若是此时对象valObj的属性有值
              this.$refs['valObj'].resetFields() // 重置valObj
            }
          })
          this.validateParkingData['name'] = ''
          this.validateParkingData['code'] = ''
        }
    
    

    编辑的方法:

        // 修改
        edit(row) {
          this.$nextTick(() => {
            if (this.$refs['valObj'] !== undefined) {
              this.$refs['valObj'].resetFields()
              this.validateParkingData['name'] = row.name
              this.validateParkingData['code'] = row.code
              this.valObj = Object.assign({}, row)  // 置空之后赋值
            }
          })
        }
    
    1. 提交
        // 确定提交该操作
        confirm() {
          this.$refs['valObj'].validate(valid => {
            if (valid) {  // true时 表示所有验证通过
            // confirmApi 是接口,里面是参数
              confirmApi(this.valObj, this.type).then(response => {
                console.log(response)
            } else {
              return false
            }
          })
        }
    
    1. 以上就是整个验证过程,最好还是打断点看他的经过,会很清晰。当然,以上仅供参考,从实际出发。
    展开全文
  • VUE表单验证

    2020-09-05 10:27:05
    VUE表单验证 v-model.number=“activityForm.Donate” 只能输入整数

    VUE表单验证
    v-model.number=“activityForm.Donate” 只能输入整数

    展开全文
  • vue表单验证组件 v-verify-plugin
  • vue表单验证自定义验证规则

    千次阅读 2019-04-12 17:15:49
    这是公司里Vue+Element UI的项目。写的验证规则放图: 样式代码: <div class="info" v-if="openslist"> <h2 class="info-h">人大代表建议办理情况反馈表</h2> <el-form ref="stateForm" :...
    这是公司里Vue+Element UI的项目。写的验证规则放图:
    

    vue项目
    样式代码:

    <div class="info" v-if="openslist">
            <h2 class="info-h">情况反馈表</h2>
            <el-form ref="stateForm" :model="stateForm"  class="stateforms" :rules="rules">
                 <el-row type="flex" class="row-bg">
                  		<el-col :span="12">
    			              	<el-form-item label="听取意见方式" class="stateform" prop="way">
    			                  	<el-select v-model="stateForm.way"  placeholder="请选择" @change="getReturn()">
    				                    <el-option label="面复" value="1"></el-option>
    				                    <el-option label="电话" value="2"></el-option>
    				                    <el-option label="座谈" value="3"></el-option>
    				                    <el-option label="未联系" value="4"></el-option>
    			                  	</el-select>
    			                </el-form-item>
    	               		</el-col>
    	                	<el-col :span="12">
    			                <el-form-item label="办理人员态度" class="stateform" prop="attitude">
    			                  <el-select v-model="stateForm.attitude"  placeholder="请选择" @change="getReturn()">
    			                    <el-option label="好" value="1"></el-option>
    			                    <el-option label="较好" value="2"></el-option>
    			                    <el-option label="一般" value="3"></el-option>
    			                    <el-option label="较差" value="4"></el-option>
    			                  </el-select>
    			                </el-form-item>
                    	</el-col>
    	          </el-row>
    	        <el-form-item>
                     <el-button type="primary" @click="onSubmit('stateForm')" style="margin: 20px 0 0 80px;position: initial;">提交</el-button>
                </el-form-item>
         </el-form>
    </div>
    

    js代码:

    data(){
          return{
    			rules:{
    			          way:[
    			            { required: true, message: '请输入听取意见方式', trigger: 'change' }
    			          ],
    			          attitude:[
    			            { required: true, message: '请输入人员态度', trigger: 'change' }
    			          ]
           	 		}
         	 }
        }
    

    记住form表单一定要“:rules=“rules(自己定义)””,下面是自定义规则,放图:
    在这里插入图片描述
    样式代码:

    	  <el-form  label-width="100px" class="passstyle" :model="Formname"  :rules="editFormPwd"  ref="Formname">
    			<el-form-item label="用户名:">
    				<!--<el-input  style="width:50%" clearable></el-input>-->
    				<span style="width:50%" class="passSpan" >{{username}}</span>
    			</el-form-item>
    			<el-form-item label="原密码:"   prop="oldpwd" >
    				<el-input  style="width:50%" clearable v-model="Formname.oldpwd" type="password">
    				</el-input>
    			</el-form-item>
    			<el-form-item label="新密码:" prop="newpwd">
    				<el-input  style="width:50%" clearable v-model="Formname.newpwd" type="password"></el-input>
    			</el-form-item>
    			<el-form-item label="确认密码:" prop="newpwds">
    				<el-input  style="width:50%" clearable v-model="Formname.newpwds" type="password"></el-input>
    			</el-form-item>
    			<el-form-item>
    				<el-button type="primary"  @click="subpass('Formname')">提交</el-button>
    			</el-form-item>
    		</el-form>
    

    js代码:

    		data(){
    				//这里是自定义的规则
    				var newpwdmin=(rule, value, callback)=>{
    					if(!value){
    						return callback(new Error('请输入密码'));
    					}else if(value !==this.Formname.newpwd){
    						return callback(new Error('两次输入密码不一致!'));
    					}else {
            				callback()
          				}
    				}
    			return{
    			editFormPwd:{
    					oldpwd:[{	required: true, message: '请输入原密码', trigger: 'blur'}],
    					newpwd:[{ required: true, message: '请输入密码', trigger: 'blur' },],
    					newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],
    						}
    				}
    			}
    

    提交返回什么就不写了;

    展开全文
  • 主要为大家详细介绍了Vue表单验证插件Vue Validator使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • <el-form ref="listQuery" :rules="rules" :inline="true" :model="listQuery" label-position="left" class="input_serch"> <el-row type="flex" justify="" align="middle">...
  • VUE 表单验证插件

    千次阅读 2019-04-26 16:37:32
    /** * VUE 表单验证插件 * User: liupeilong * Date: 2019/4/26 * Time: 10:50 */ var validation = { install:function(Vue, options){ var validationConfig = { listenerEvent:"change", ...
  • VUE表单验证

    2019-09-29 10:01:39
    我们在vue项目的开发中经常会碰到form 表单校验,在项目中很多地方都需要,在组件内部写校验规则,大大增加了组件内部的代码量,组件看起来不简洁。同时,校验规则修改,可能很多文件得跟着修改,校验代码可复用性也...
  • vue 表单验证实例

    2017-06-19 13:35:00
    1.注册 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...src/vue.min.js
  • vue表单验证无效

    2020-06-16 10:54:15
    Property or method “rules” is not...看下面的图,一定要注意表单验证规则rules是加在return里面的,不是return外面!! export default { data () { return { form: { username: 'sk', password: '' }, rule
  • el-input <el-form-item prop="account"> <span class="font-container"> <i class="iconfont icon-yonghu"></i> </span> <el-input v-model="loginForm.account... placeholde
  • 主要为大家详细介绍了Vue表单验证插件的制作过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • # Vue表单验证不生效,求大神解惑 表单中有一个下拉框联动的需求(选择库存地,联动批次),但是手动用this.form.batchNo = this.batchNoList[0].value,无法触发表单验证,后来使用$set才起作用,但是不明白其中的...

空空如也

1 2 3 4 5 ... 20
收藏数 1,549
精华内容 619
关键字:

vue表单验证

vue 订阅