按需引入

import validator from 'paiui/dist/packages/validator'
Vue.use(validator)

规则

使用方法

绑定rules值，并设置validate-on-rule-change为false，防止rules改变触发验证

<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :rules="rules" :validate-on-rule-change="false">
</el-form>

export default {
  data() {
    return {
      // ...
      ruleForm: {
        // ...
      },
      rules: {},
    }
  },
}

Label识别

通过el-form-item的label设置

<el-form-item label="字段标签" prop="value1">
  <el-input v-model="ruleForm.value1"></el-input>
</el-form-item>

通过表单的label设置

<el-form-item prop="value1">
  <el-input v-model="ruleForm.value1" label="字段标签"></el-input>
</el-form-item>

必填required设置

<el-form-item label="字段标签" prop="value1">
  <el-input v-model="ruleForm.value1" required></el-input>
</el-form-item>

规则设置

规则名

<el-form-item label="身份证" prop="value1">
  <el-input v-model="ruleForm.value1" p-validator="idcard" required></el-input>
</el-form-item>

规则参数

<el-form-item label="不大于5" prop="value1">
  <el-input v-model="ruleForm.value1" p-validator="max:5" required></el-input>
</el-form-item>

规则错误提示

<el-form-item label="不小于1" prop="value1">
  <el-input v-model="ruleForm.value1" p-validator="min:1[这里不能小于1哦！]" required></el-input>
</el-form-item>

满足所有规则

<el-form-item label="1到5之间" prop="value1">
  <el-input v-model="ruleForm.value1" p-validator="min:1&max:5" required></el-input>
</el-form-item>

满足其中一项规则

<el-form-item label="账号或邮箱" prop="value1">
  <el-input v-model="ruleForm.value1" p-validator="account|email" required="请填写账号或邮箱"></el-input>
</el-form-item>

错误提示

<div>此错误提示优先级高于规则内设置的部分</div>

<el-form-item label="数值2" prop="value2">
    <el-input v-model="ruleForm.value2" p-validator="is:6|is:2" message="请输入2或6"></el-input>
  </el-form-item>

扩展规则

// 扩展规则
this.$paiui.validator.extend('my', (value) => {
  return value === 'test' ? '' : '不对不对！'
})

<el-form-item label="扩展规则" prop="value4">
  <el-input v-model="ruleForm.value4" p-validator="my"></el-input>
</el-form-item>

生成规则rules

<div>通过ref的方式识别规则</div>

export default {
  // ...
  mounted() {
    // 这里生成规则
    this.rules = this.$paiui.validator.parseRules(this.$refs.ruleForm, {
      // 合并其它规则
      date2:[
        { required: true, message: '请选择时间', trigger: 'change' } ]
    })
  },
}

示例

<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :rules="rules" :validate-on-rule-change="false">
  <el-form-item label="数值1" prop="value1">
    <el-input v-model="ruleForm.value1" placeholder="请输入数值1" p-validator="min:1&max:5[哎呀不能大于{0}哦]" required v-p-number></el-input>
  </el-form-item>
  <el-form-item label="账号或邮箱" prop="value2">
    <el-input v-model="ruleForm.value2" p-validator="account|email" required="请填写账号或邮箱"></el-input>
  </el-form-item>
  <el-form-item label="账号" prop="value3">
    <el-input v-model="ruleForm.value3" p-validator="account" required></el-input>
  </el-form-item>
  <el-form-item label="身份证" prop="idcard">
    <el-input v-model="ruleForm.idcard" p-validator="idcard" required></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" required>
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          p-label="日期2"
          v-model="ruleForm.date1"
          style="width: 100%;"
          label="日期"
          required
          message="请选择日期哦！">
        </el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;" label="时间" required message="请选择时间哦！">
        </el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="扩展规则" prop="value4">
    <el-input v-model="ruleForm.value4" p-validator="my"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" v-on:click="submitForm('ruleForm')">立即创建</el-button>
    <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

export default {
  data() {
    return {
      ruleForm: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        region: '',
        date1: '',
        date2: '',
        idcard: ''
      },
      rules: {},
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  mounted() {
    // 扩展规则
    this.$paiui.validator.extend('my', (value) => {
      return value === 'test' ? '' : '不对不对！'
    })
    // 这里生成规则
    this.rules = this.$paiui.validator.parseRules(this.$refs.ruleForm, {
      // 合并其它规则
      date2:[
        { required: true, message: '请选择时间', trigger: 'change' } ]
    })
  },
}

调用方法

vm.$paiui.validator.min(1, 5)

提示语规范

必填

若label=”字段A”，则提示语如下：

请输入”字段A”

不符合某格式

若p-validator=”mobile”，则提示语如下：

不符合手机号格式

相等

若p-validator=”is:6”，则提示语如下：

需等于6

不相等

若p-validator=”not:6”，则提示语如下：

不可以等于6

最大最小值

若p-validator=”min:2”，则提示语如下：

不可以小于2

若p-validator=”max:6”，则提示语如下：

不可以大于2

字符串长度

若p-validator=”length:5”，则提示语如下：

字符串长度需等于5

若p-validator=”minLength:5”，则提示语如下：

字符串长度不可以小于5

若p-validator=”maxLength:5”，则提示语如下：

字符串长度不可以大于5

其它

若p-validator=”password”，则提示语如下：

需满足6-18位字符，由英文字母、数字和下划线组成，首字符仅可以是英文字母

若p-validator=”account”，则提示语如下：

需为6-20位字母和数字组合

输入限制

限制只能输入数字（[0-9.-]）

<el-input v-model="ruleForm.value1" v-p-number></el-input>

限制只能输入电话字符（[0-9-]）

<el-input v-model="ruleForm.value1" v-p-phone></el-input>

参考

Element - 表单验证