elementui自定义校验

正文

vue中elementui自定义校验

<el-dialog title="Agent 信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="EMC静态目录" prop="sourcedir" :label-width="formLabelWidth">
          <el-input v-model="form.sourcedir" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Agent 监控目录" prop="monitoringdir" :label-width="formLabelWidth">
          <el-input v-model="form.monitoringdir" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="监听事件" :label-width="formLabelWidth">
          <el-input v-model="form.monitoringevent" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="消息加密KEY" :label-width="formLabelWidth">
          <el-input v-model="form.encryptionkey" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="防篡改开关" :label-width="formLabelWidth">
          <el-switch v-model="form.switchstatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item label="IP" prop="ip" :label-width="formLabelWidth">
          <el-input v-model="form.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="DomainID" prop="domainid" :label-width="formLabelWidth">
          <el-input v-model.number="form.domainid" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
      </div>
</el-dialog>

<script>
export default {
  name: "SchedualIndex",
  data() {
    var validcodeip = (rule, value, callback) => {
      const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("输入IP格式不合法!"));
      }
    };
    return {
      tableData: [],
      STATUSS: {
        DOWN: { status: "离线", type: "danger" },
        UP: { status: "在线", type: "primary" }
      },
      dialogFormVisible: false,
      form: {
        sourcedir: "",
        monitoringdir: "",
        monitoringevent: "create,delete,modify",
        encryptionkey: "SqHonEP2",
        switchstatus: true,
        ip: "",
        domainid: ""
      },
      formLabelWidth: "120px",
      rules: {
        sourcedir: [
          { required: true, message: "静态化目录不能为空", trigger: "blur" }
        ],
        monitoringdir: [
          { required: true, message: "Agent 监控目录不能为空", trigger: "blur" }
        ],
        ip: [
          { required: true, message: "IP 不能为空", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" }
        ],
        domainid: [
          { required: true, message: "DomainID 不能为空", trigger: "blur" },
          { type: "number", message: "DomainID 必须为数字值", trigger: "blur" }
        ]
      }
    };
  }

};
</script>
``` 
注意其中
{% img /images/front/elementui/elementui1.png %}
ip和mac校验
```javascript
/*ip正则验证*/
var validcodeip = (rule, value, callback) => {
    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    if (reg.test(value)) {
        callback();
    } else {
        return callback(new Error('输入格式不合法！'));
    }
};

/*mac正则验证*/
var validcodemac = (rule, value, callback) => {
    const reg = /[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}/;
    if (reg.test(value)) {
        callback();
    } else {
        return callback(new Error('输入格式不合法！'));
    }
};

目前自己支持

string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.
any: Can be any type.

参考资料

elementui国内网址 https://element.eleme.cn/#/zh-CN/component/message-box
async-validator https://github.com/yiminghe/async-validator