vue—表单

<!-- 表单区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
    <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
         <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
        <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
</span>                    

• <el-form></el-form>：表单区域
• ref：表单被引用时的名称，标识 是我们绑定的对象
• rules：表单验证的规则
• model：表单数据对象 是绑定我们form表单中需要提交给后台的一个对象
• label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
• <el-form-item>：表单中的每一项子元素
• label：标签文本
• prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的,在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方
• v-model：绑定的表单数据对象属性

data数据

data(){
     //验证邮箱的规则
     var checkEmail = (rule, value, callback) => {
         //验证邮箱的正则表达式
         const regEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
         if(regEmail.test(value)) return callback()
         callback(new Error('请输入合法的邮箱'))
    }
    //验证手机号的规则
    var checkMobile = (rule, value, callback) => {
        //验证手机号的正则表达式
        const regMobile=/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
        if(regMobile.test(value)) return callback()
        callback(new Error('请输入合法的电话'))
    }
    return{
        //用户的表单数据
        addForm:{
             username:'',
             password:'',
             email:'',
             mobile:'',
        },
        //表单的验证规则对象
        addFormRules:{
            username:[
                { required: true, message: '请输入登录名称', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            password:[
                { required: true, message: '请输入登录密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
             ],
             email:[
                 { required: true, message: '请输入邮箱', trigger: 'blur' },
                 {validator:checkEmail,trigger:'blur'}
              ],
              mobile:[
                  { required: true, message: '请输入电话', trigger: 'blur' },
                  {validator:checkMobile,trigger:'blur'}
              ],
        },
    }
}