Vue使用rules对表单字段进行校验

欢迎一起讨论

Geooo的个人博客：https://geooo.gitee.io/geoooblog/

环境：基于 Vue + ElementUI

1. 在 el-form 标签内添加 rules 属性 ，并在<el-form-item> 内添 prop 属性去对应 rules 中的规则

<el-form :model="form" :rules="rules" ref="form" lable-width="100px">

    <el-form-item label="商品ID" prop="id" >
        <el-input v-model="form.id" placeholder="输入订单号" clearable></el-input>
    </el-form-item>
    
    <el-form-item lable="商品名称" prop="name">
        <el-input v-model="form.name" placeholder="输入商品名称" clearble></el-input>
    </el-form-item>
    
    <el-form-item lable="商品分类" prop="sort">
        <el-input v-model="form.sort" placeholder="选择商品分类" clearble></el-input>
    </el-form-item>
    
    <el-form-item lable="商品数量" prop="count">
        <el-input v-model="form.count" placeholder="选择商品数量" clearble></el-input>
    </el-form-item>

</el-form>

2. 创建一个约束函数( validate.js ) 定义验证规则

/* 是否是公司邮箱*/
export function isWscnEmail(str) {
  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
  return reg.test(str.trim());
}

/* 合法uri*/
export function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  return urlregex.test(textval);
}

// 验证是否整数
export function isInteger(rule, value, callback) {
  if (!value) {
    return callback(new Error('输入不可以为空'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('请输入正整数'));
    } else {
      const re = /^[0-9]*[1-9][0-9]*$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('请输入正整数'));
      } else {
        callback();
      }
    }
  }, 1000);
}


// 验证是否是[0-1]的小数
export function isDecimal(rule, value, callback) {
  if (!value) {
    return callback(new Error('输入不可以为空'));
  }
  setTimeout(() => {
    if (!Number(value)) {
      callback(new Error('请输入数字'));
    } else {
      if (value < 0 || value > 1) {
        callback(new Error('请输入[0,1]之间的数字'));
      } else {
        callback();
      }
    }
  }, 1000);
}

// 验证端口是否在[0,65535]之间
export function isPort(rule, value, callback) {
  if (!value) {
    return callback(new Error('输入不可以为空'));
  }
  setTimeout(() => {
    if (value == '' || typeof(value) == undefined) {
      callback(new Error('请输入端口值'));
    } else {
      const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
      const rsCheck = re.test(value);
      if (!rsCheck) {
        callback(new Error('请输入在[0-65535]之间的端口值'));
      } else {
        callback();
      }
    }
  }, 1000);
}

/* 小写字母*/
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/;
  return reg.test(str);
}

3.在我们当前vue页面引入 validate.js 验证规则文件，在export default中定义rules规则，使用语法为： {validate:验证方法 , trigger: 触发条件}

import { isInteger } from '../../util/validate.js'; //引入规则验证js

export default {
    name: 'buyDetail',
    data(){
        form: {
            id: '',
            name: '',
            sort: '',
            count: '',
        },
        
        rules: {
            id: [{ require: true, message: '请输入商品ID', trigger: 'blur'},{ validate: 'isInteger',trigger: 'blur'}],
            name: [{ require: true, message: '请输入商品名称'}, trigger: 'blur'}],
            sort: [{ require: true, message:'请输入商品分类', trigger: 'blur'},{ validate: 'isInteger', trigger:'blur'}],
            count: [{ require: true, message:'请输入商品数量',trigger: 'blur'}, { validate:'isInteger',trigger:'blur'}]
            
        },
    }
    
}