效果展示:

Vue +ElementUI 源码：

 
<template> 
<div> 
 <el-form ref="form" :model="form" :rules="rules"  label-width="80px"> 
  <el-form-item label="用户名" prop="name"> 
    <el-input v-model="form.name"  placeholder="请输入用户名:" autocomplete="off"></el-input> 
  </el-form-item> 
  <el-form-item label="邮箱" prop="email"> 
    <el-input v-model="form.email"  placeholder="请输入邮箱:"></el-input> 
  </el-form-item> 
  <el-form-item label="密码" prop="pass"> 
    <el-input type="password" v-model="form.pass"  placeholder="请输入密码:" autocomplete="off"></el-input> 
  </el-form-item> 
  <el-form-item label="密码确认" prop="checkPass"> 
    <el-input type="password" v-model="form.checkPass"  placeholder="请再输入一遍密码:" autocomplete="off"></el-input> 
  </el-form-item> 
  <el-form-item label="手机号:" prop="userPhone"> 
        <el-input type="text" v-model.number="form.userPhone" placeholder="请输入手机号:"></el-input> 
</el-form-item> 
<el-form-item label="验证码:"> 
    <el-input type="text" placeholder="请输入验证码:" style="width:230px"></el-input> 
    <el-button type="text">发送验证码</el-button> 
</el-form-item> 
<el-form-item label="活动区域"> 
    <el-select v-model="form.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="活动时间"> 
    <el-col :span="11"> 
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> 
    </el-col> 
    <el-col class="line" :span="2">-</el-col> 
    <el-col :span="11"> 
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> 
    </el-col> 
  </el-form-item> 
  <el-form-item label="即时配送"> 
    <el-switch v-model="form.delivery"></el-switch> 
  </el-form-item> 
  <el-form-item label="活动性质"> 
    <el-checkbox-group v-model="form.type"> 
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> 
      <el-checkbox label="地推活动" name="type"></el-checkbox> 
      <el-checkbox label="线下主题活动" name="type"></el-checkbox> 
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> 
    </el-checkbox-group> 
  </el-form-item> 
  <el-form-item label="特殊资源"> 
    <el-radio-group v-model="form.resource"> 
      <el-radio label="线上品牌商赞助"></el-radio> 
      <el-radio label="线下场地免费"></el-radio> 
    </el-radio-group> 
  </el-form-item> 
  <el-form-item label="活动形式"> 
    <el-input type="textarea" v-model="form.desc"></el-input> 
  </el-form-item> 
  <el-form-item> 
    <el-button type="primary" @click="onSubmit('form')">立即创建</el-button> 
    <el-button @click="resetForm('form')"> 重 置</el-button> 
  </el-form-item> 
</el-form> 
</div> 
</template> 
 
<script> 
    export default { 
    data() { 
        var checkUsername = (rule, value, callback) => { 
            if (!value) { 
                return callback(new Error('用户名不能为空!')); 
            } else { 
                callback(); 
            } 
        }; 
        var userEmail = (rule, value, callback) => { 
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 
            if (!value) { 
                return callback(new Error('邮箱不能为空')) 
            } 
            setTimeout(() => { 
                if (mailReg.test(value)) { 
                    callback() 
                } else { 
                    callback(new Error('请输入正确的邮箱格式')) 
                } 
                }, 100) 
        }; 
        var validatePass = (rule, value, callback) => { 
            if (value === '') { 
                callback(new Error('请输入密码')); 
            } else { 
                callback(); 
            } 
        }; 
        var validatePass2 = (rule, value, callback) => { 
            if (value === '') { 
                    callback(new Error('请再次输入密码')); 
            } else if (value !== this.form.pass) { 
                callback(new Error('两次输入密码不一致!')); 
            } else { 
                callback(); 
            } 
        }; 
        var checkPhone = (rule, value, callback) => { 
            const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/ 
            if (!value) { 
                return callback(new Error('电话号码不能为空')) 
            } 
            setTimeout(() => { 
            // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串 
            // 所以在前面加了一个+实现隐式转换 
 
            if (!Number.isInteger(+value)) { 
                callback(new Error('请输入数字值')) 
            } else { 
                if (phoneReg.test(value)) { 
                    callback() 
                } else { 
                callback(new Error('电话号码格式不正确')) 
                } 
            } 
            }, 100) 
        } 
      return { 
        form: { 
          name: '', 
          email: '', 
          pass: '', 
          checkPass: '', 
          userPhone: '', 
          region: '', 
          date1: '', 
          date2: '', 
          delivery: false, 
          type: [], 
          resource: '', 
          desc: '' 
        }, 
        rules: { 
            name: [ 
                {validator: checkUsername, trigger: 'blur'} 
            ], 
            email: [ 
                {validator: userEmail, trigger: 'blur'} 
            ], 
            pass: [ 
                {validator: validatePass, trigger: 'blur'} 
            ], 
            checkPass: [ 
                {validator: validatePass2, trigger: 'blur'} 
            ], 
            userPhone: [ 
                {validator: checkPhone, trigger: 'blur'} 
            ] 
        }, 
      } 
    }, 
     
    methods: { 
      onSubmit(formName) { 
       this.$refs[formName].validate((valid) => { 
        if (valid) { 
            alert('验证成功!'); 
        } else { 
            console.log('error submit!!'); 
            return false; 
        } 
        }); 
      }, 
      resetForm(formName) { 
        this.$refs[formName].resetFields(); 
      } 
    } 
  } 
</script> 
<style> 
</style>

注意:ElementUI el-form组件使用自定义校验规则时，必须保证自定义校验规则的每个分支都调用了callback方法，否则会导致el-form组件的validate方法无法进入回调函数。