给form表单添加校验前提是要处理以下三步

  1. 在el-form元素上绑定一个model属性和绑定一个rules规则属性
  2. 在el-form-item,表单项添加一个prop属性
  3. 在el-input输入框添加v-model进行双向绑定

例如

<div id="app">
    <el-card>
      <!-- 登录功能 -->
    <!-- 表单组件:绑定model属性和规则属性,model属性就是data中定义的loginForm对象 -->
    <el-form class="Loginform" ref="loginForm" :model="loginForm" :rules="rules">
      <!-- 表单项 绑定prop属性,对应的就是data中loginForm对象中的username属性-->
      <el-form-item prop="username">
        <!-- 输入框 v-model双向绑定的是data中的loginForm的username -->
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <!-- 输入框 -->
        <el-input placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 登录按钮 -->
        <el-button type="primary" class="loginBtn" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>

在data中进行规则校验

	data(){
		return {
			loginForm:{
				username:'',
				password:''
			},
			//制定规则
			rules:{
				username:[{
					//必填项
					required:true,
					//提示消息
					message:'请输入用户名'
				},{
					//通过正则校验
					pattern:/^1[3|5|7|8|9]\d{9}$/,
					//不通过的提示信息
					message:'请输入正确的手机号'
				},{
					//自定义规则
					//写法:validator:函数(参数1,参数2(校验的内容),回掉函数)
					//自定义一个手机号第三位必须是9的规则
					validator:(rules,value,callback)=>{
					//如果内容的第二个字符是9,则执行callback,不操作,如果不是,就new 一个错误对象,进行callback进行调用
						value.charAt(2)==='9'?callback():callback(new Error('第三位必须是9'))
					}
				}],
				password:[{
					//触发方式:blur或者change
					trigger:'blur',
					//最小6位数,最大16位数字
					min:6,
					max:16
					//message提示文字
					message:'请输入6-16位字符或者数字'
				},{
					trigger:'blur',
					required:true,
          			message:'请输入密码',
				}]
			}
		}
	}

如果用户直接通过点击登陆进行登陆,不触发blur校验,这时候就需要手动校验

  1. 给登陆按钮绑定点击事件

  2. 在点击时做校验

    2.1给form表单添加一个ref属性
    2.2通过this.$refs.属性名,validate进行校验
    	有两种方式进行校验
    	方式1:在validate方法中传入一个回调函数
    	方法2:不给validate传回调函数,它的返回 值就是一个promise对象,可以通过then方法获取成功的,可以通过catch获取失败的信息
    
	//登陆的点击事件
	login(){
		//方式1,有回调函数
		//获取form表单
		this.$refs.loginForm.validate((isok)=>{
			if(isok){
			//校验通过
				return alert('校验通过')
			}else{
				return alert('校验失败')
			}
		)
		//方式2
		this.$refs.loginForm.validate().then(()=>console.log('校验通过')).catch(()=>{console.log('校验失败')})
	}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐