饿了么组件库element-ui正则表达式验证表单，后端验证表单

vue+elementui 提高开发效率，以下为form表单验证例子。包含自定义验证等。

1. 以中国大陆手机号验证为例

// 这是组价的代码
<el-form-item prop="mobile">
    <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
</el-form-item>

// 这是rules的代码
mobile: [
    { validator: validateMobile, trigger: 'blur' },
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
],

在element-ui的源码中搜索blur，你会很容易看到除了blur 还有focus、input，多个使用“,”分隔

2. 表单局部提交后端验证

在一些输入项目较多的表单提交中，比如说注册时填写的用户名，通常我们会对用户名是否重复进行验证，这是就需要调用服务来验证，这种略显复杂的验证，就需要自定义验证规则来实现。看下面的代码：

function validateMobile(rule, value, callback) {

var MobileRegex = /^1[0-9]{10}$/;
if (!MobileRegex.test(value)) {
callback(new Error('手机号码格式不正确！'))
} else {
callback();
}
}

注意：自定义规则中每个执行流程中都必须附带callback()，这样才能明确通过验证的情况下去掉输入框上的loading。要显示的错误提示则可以new Error（“xxxx”）即可。

3. 综合来看

通常可以把所有规则都写在自定义的规则中，即可实现较为复杂的验证，实际上我们可以再validatePass里面调用根实例下所有data methods...，一个很简单的例子是实现两次输入的密码是否相同的验证，看下面的代码：

     <div id="app">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                 <el-form-item label="手机号码"  prop="mobile">
                     <el-input v-model="ruleForm.mobile"></el-input>
                 </el-form-item>
                  <el-form-item label="活动区域" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                      <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="选择日期" v-model="ruleForm.date1" style="width: 100%;"></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 type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="即时配送" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                  </el-form-item>
                  <el-form-item label="活动性质" prop="type">
                   <el-checkbox-group v-model="ruleForm.type">
                      <el-checkbox label="1"  name="type">美食/餐厅线上活动</el-checkbox>
                      <el-checkbox label="2" name="type">地推活动</el-checkbox>
                      <el-checkbox label="3" name="type">线下主题活动</el-checkbox>
                      <el-checkbox label="4" name="type">单纯品牌曝光</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="特殊资源" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="线上品牌商赞助"></el-radio>
                      <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="活动形式" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
          </el-form>


        </div>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>


<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script  type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            ruleForm: {
                name: '',
                mobile: "",
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                  { required: true, message: '请输入活动名称', trigger: 'blur' },
                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                mobile: [
                  { required: true, message: '请输入手机号码', trigger: 'blur' },
                 {
                     validator: function (rule, value, callback) {
                         var MobileRegex = /^1[0-9]{10}$/;
                         if (!MobileRegex.test(value)) {
                             callback(new Error('手机号码格式不正确！'))
                         } else {
                             callback();
                         }
                     }, trigger: 'blur'
                 }
                ],
                region: [
        { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                  { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                  { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                  { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                  { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }, methods: {
            submitForm: function (formName) {
                var Self = this;
                this.$refs[formName].validate(function (valid) {
                    if (valid) {
                        alert(JSON.stringify(Self.ruleForm));
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            }


        }
    });
</script>

就这么简单就可以实现非vuejs情况下是非啰嗦的验证。而且样式也不会很丑，当然了任然可以选择自定义样式。这个以后再记录。

效果图如下：

饿了么组件库element-ui正则表达式验证表单，后端验证表单

猜你喜欢