ElementUI的form表单校验

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用户名称:" prop="userName">
       <el-input v-model="rulesForm.userName" style="width:300px"/>
    </el-form-item>
</el-form>

data() {
    // 限制为非负整数
    let regularNumber = (rule,value,callback) => {
        if(value != '') {
            if(!/^(0?|-?[1-9]\d*)$/.test(value)) {
                callback(new Error('数字格式错误'))
            } else {
                callback()
            }
        } else {
            callback()
        }
    },
    rulesForm: [
        { required: true, message: '请输入', trigger: ['blur','change'] },
        { type: 'string', required: true, pattern: /^[a-z]+$/ },
        { min: 4, max: 20, message: "请输入长度在 4 到 20 个字符", trigger: 'blur'},
        { message: '数字格式错误', validator: regularNumber, trigger: ['blur', 'change'] }
    ]
}
​