ElementUI：关于 el-form 必填项的校验规则

最新推荐文章于 2024-07-08 10:27:33 发布

卿卿qing

最新推荐文章于 2024-07-08 10:27:33 发布

阅读量1.3k

点赞数

分类专栏： ElementUI Vue

本文链接：https://blog.csdn.net/weixin_43900414/article/details/107670469

版权

Vue 同时被 2 个专栏收录

114 篇文章 3 订阅

订阅专栏

ElementUI

27 篇文章 2 订阅

订阅专栏

<el-form
  ref="ruleForm"
  :model="ruleForm"
  :rules="rules"
  label-width="100px"
  class="demo-ruleForm"
>
	<el-form-item
       label="联系方式"
       prop="mobilePhone"
     />
     <el-form-item
       label="电子邮箱"
       prop="email"
     />
</el-form>

data() {
	var checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|16[0123456789]|17[0123456789]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法手机号码'))
    }
    var checkEmail = (rule, value, cb) => {
      const regMobile = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法电子邮箱'))
    }
    return {
    	rules: {
			mobilePhone: [
	          { required: true, message: '请输入手机号码', trigger: 'blur' },
	          { validator: checkMobile, max: 11, message: '请输入正确的格式', trigger: 'blur' }
	        ],
	      	email: [
	          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
	          { validator: checkEmail, max: 11, message: '请输入正确的格式', trigger: 'blur' }
	        ]
		}
	}
}