el-form-item表验证如何加正则

小白都可直接拿来 c v 使用的表单验证

         <el-form-item label="经营地址" prop="deptAddress" class="label">
           <el-input v-model="form.deptAddress"></el-input>
         </el-form-item>

         <el-form-item
           label="社会信用统一编码"
           prop="creditCode"
           class="label"
         >
           <el-input v-model="form.creditCode"></el-input>
         </el-form-item>

         <el-form-item label="企业固话" prop="fixedPhone" class="label">
           <el-input
             placeholder="区号—号码"
             v-model="form.fixedPhone"
           ></el-input>
         </el-form-item>
       </div>
       <el-form-item prop="protocol" class="label">
         <el-checkbox v-model="form.protocol"
           >本人已认真阅读且同意遵守<a href="#"
             >《平台协议》</a
           ></el-checkbox
         >
       </el-form-item>
       <el-form-item>
         <el-button
           type="primary"
           native-type="submit"
           @click.prevent="submitForm('form')"
           >提交</el-button
         >
       </el-form-item>
     </el-form>
   </div>
 </div>

js部分 封装的api入口

<script>
import { toPlus } from '@/api/lessApi'//封装的api
export default {
  data() {
    var credit = (rule, value, callback) => {
    var creditNum =
/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/
      if (!value) {
        return callback(new Error('请输入社会信用统一编码'))
      }else if (!creditNum.test(value)) {
        callback(new Error('社会信用统一编码格式错误'))
      }
      callback();//没有这个回调 验证完成后,无法执行
    }
   var fixed = (rule, value, callback) => {
      var fixedNum = /0\d{2,3}-[1-9]\d{6,7}$/
      if (!value) {
        return callback(new Error('请输入固定电话号'))
      }else if (!fixedNum.test(value)) {
        callback(new Error('固定电话格式错误'))
      }
        callback();
      }
      var proto = (rule, value, callback) => {
        if (value === '' || value == false) {
           callback(new Error('请勾选《平台协议》'))
        }else{
         callback();
        }
    }
    return {
      form: {
        deptType: '',
        deptName: '',
        deptAddress: '',
        creditCode: '',
        fixedPhone: '',
        protocol: true,
      },
      rules: {
        deptType: [
          { required: true, message: '请选择单位类型', trigger: 'blur' },
        ],
        deptName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          { min: 5, max: 9, message: '长度在5到9个字符', trigger: 'blur' }
        ],
        deptAddress: [
          { required: true, message: '请输入单位地址', trigger: 'blur' },
        ],
    //以上都是不加正则直接使用的,有需要用到正则的用下面这种方式
        fixedPhone: [{ validator: fixed, trigger: 'blur' }],
        protocol: [{ validator: proto, trigger: 'change' }],
        creditCode: [{ required: true, validator: credit, trigger: 'blur' }],
        
   //验证用到正则条件的,不分开写 也写 rules 里面如下:
        creditCode: [{ required: true, message: "请输入统一社会信用编码", trigger: "blur" },
            {
              required: true,
              message: "统一社会信用编码格式错误",
              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
              trigger: "blur"
            }],
      },
    }
  },
  
 
            
            
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
                if (valid) {
                  let params = { ...this.form }
                toPlus(params).then((res) => {
                  if(res.code == 1){}else {
                      this.$message.error(`${res.msg}`);
                    }
                })
             }
         })
    },
</script>
  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
您可以使用 `el-form` 组件的 `rules` 属性来添加正则验证。在 `rules` 中设置一个数组,每个数组元素代一个单项的验证规则。下面是一个示例: ```html <template> <el-form :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' }, { pattern: /^[A-Za-z0-9]{4,10}$/, message: '用户名必须为4-10位字母或数字', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' }, { pattern: /^[A-Za-z0-9]{6,16}$/, message: '密码必须为6-16位字母或数字', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 验证通过,可以提交单数据 console.log('提交的单数据:', this.form) } else { // 验证不通过,输出错误信息 console.log('验证不通过') } }) } } } </script> ``` 在上面的示例中,我们为用户名和密码分别设置了两个验证规则,一个是必填,一个是正则验证。具体的验证规则可以根据实际需求进行设置。在提交单时,可以使用 `this.$refs.form.validate` 方法来触发验证。如果验证通过,就可以提交单数据。如果验证不通过,就会输出错误信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值