elementui做form校验示例

  • el-dialog--->visible.sync="addNew.visible"用来控制是否显示
  • el-form--->rules="addNewRules":验证规则
  • el-form-item---》需要prop="membername"传入值,不然无法验证
  • el-input---》v-model="addNew.membername"绑定相关数值
<el-dialog title="新增子账户" :visible.sync="addNew.visible" >
  <el-form :model="addNew" :rules="addNewRules" label-width="70px" label-position="right"  ref="addNewForm">
    <el-form-item label="用户名"  prop="membername" >
      <el-input v-model="addNew.membername" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="手机号"  prop="mobileno"  >
      <el-input v-model="addNew.mobileno" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码"  prop="password"  >
      <el-input v-model="addNew.password" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="状态"  prop="state"  >
      <el-select v-model="addNew.state" placeholder="请选择查询状态">
        <el-option label="已启用" value="opened"></el-option>
        <el-option label="已禁用" value="closed"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="权限"  prop="roleId" >
      <el-select v-model="addNew.roleId" placeholder="请选择查询状态">
        <el-option label="市场" value="1"></el-option>
        <el-option label="财务" value="2"></el-option>
        <el-option label="客服" value="3"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addNew.visible = false">取 消</el-button>
    <el-button type="primary" @click="addNewSubmit('addNewForm')">确 定</el-button>
  </div>
</el-dialog>

js 部分

  • addNewRules-->这里做格式校验,官方示例里面没法验证手机号,查了查可以用pattern做正则校验
  • arr中,并列的{}对应不同校验及格式错误时的提示。
export default{
    data () {
      return {
        // 新增用户
        addNew: {
          mobileno: '',
          password: '',
          membername: '',
          state: '',
          roleId: '',
          visible: false
        },
        addNewRules: {
          mobileno: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '请正确输入您的手机号码', trigger: 'blur' }
          ],
          membername: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入您的密码', trigger: 'blur' },
            { pattern: /^[\d_a-zA-Z]{6,18}$/, message: '请输入6-18位数字字母组成的密码', trigger: 'blur' }
          ],
          state: [
            { required: true, message: '请选择相关状态', trigger: 'change' }
          ],
          roleId: [
            { required: true, message: '请选择角色权限', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      // 新增子账户
      addNewHandler () {
        this.addNew.visible = true
      },
      addNewSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let opt = {
              mobileno: '',
              password: '',
              membername: '',
              state: '',
              roleId: ''
            }
            this._addSubAccountFn(opt)
          } else {
            return false
          }
        })
      },
      _addSubAccountFn (opt) {
        addSubAccount(opt).then(res => {
          console.log(res)
        })
      }
    }
  }

随机浏览