element UI input 验证

<template>

  <div class="group">

    <div class="center gtop">

      <el-button type="primary" icon="el-icon-plus" @click="act('add')">新增管理员</el-button>

      <div class="center rtright">

        账号:

        <el-input style="width: 180px;margin: 0 15px 0 5px;"></el-input>

        <el-button type="danger" icon="el-icon-search">搜索</el-button>

      </div>

    </div>

    <el-table :data="list">

      <el-table-column

        prop="phone"

        label="账号">

      </el-table-column>

      <el-table-column

        prop="name"

        label="名称">

      </el-table-column>

      <el-table-column

        prop="ip"

        label="登录IP">

      </el-table-column>

      <el-table-column

        label="权限组">

        <template slot-scope="scope">

          <div v-for="item in scope.row.role" :key="item.role_id">{{item.role_name}}</div>

        </template>

      </el-table-column>

      <el-table-column

        prop="created_at"

        label="添加时间">

      </el-table-column>

      <el-table-column

        label="状态">

        <template slot-scope="scope">{{scope.row.status == 1 ? '可用' : '不可用'}}</template>

      </el-table-column>

      <el-table-column

        label="操作">

        <template slot-scope="scope">

          <el-button @click="act('edit',scope.row)" type="text">修改</el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-dialog

      title="提示"

      :visible.sync="dialogVisible"

      width="40%">

      <el-form ref="form" :model="actParams" label-width="120px" :rules="rules">

        <el-form-item label="名称：" prop="name">

          <el-input clearable style="width: 70%;" v-model="actParams.name"></el-input>

        </el-form-item>

        <el-form-item label="电话：" prop="phone">

          <el-input style="width: 70%;" type="text" auto-complete="on" autofocus placeholder="请输入您的手机号" v-model="actParams.phone"></el-input>

        </el-form-item>

        <el-form-item label="密码：" prop="password">

          <el-input clearable style="width: 70%;" v-model="actParams.password" show-password></el-input>

        </el-form-item>

        <el-form-item label="确认密码：" prop="password_confirmation">

          <el-input clearable style="width: 70%;" v-model="actParams.password_confirmation" show-password @blur="change_password_confirmation"></el-input>

        </el-form-item>

        <el-form-item label="所属分组：">

          <el-checkbox-group v-model="actParams.role">

            <el-checkbox :label="item.name" v-for="item in roleList" :key="item.id"></el-checkbox>

          </el-checkbox-group>

        </el-form-item>

        <el-form-item label="状态：">

          <el-radio-group v-model="actParams.status">

            <el-radio :label="0">不可用</el-radio>

            <el-radio :label="1">可用</el-radio>

          </el-radio-group>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="confirm">确 定</el-button>

      </span>

    </el-dialog>

  </div>

</template>

<script>

export default {

  data() {

    var validatePass2 = (rule, value, callback) => {

        if (value === '') {

          callback(new Error('请再次输入密码'));

        } else if (value !== this.actParams.password) {

          callback(new Error('两次输入密码不一致!'));

        } else {

          callback();

        }

    };

    return {

      list: [],

      roleParams: {

        name: '',

        status: '',

      },

      roleList: [],

      dialogVisible: false,

      actParams: {

        id: '',

        name: '',

        phone: '',

        password: '',

        password_confirmation: '',

        role: [],

        status: 0,

      },

      rules: {

        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],

        phone: [{ required: true, message: '请输入电话', trigger: 'blur' },{ min: 11, max: 11, message: '请输入11为电话号码', trigger: 'blur' }],

        password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }],

        password_confirmation: [{ required: true, message: '请确认密码', trigger: 'blur' },{ validator: validatePass2, trigger: 'blur' }],

      }

    }

  },

  methods: {

    change_password_confirmation() {

      console.log('event',this.actParams.password_confirmation)

    },

    confirm() {

      console.log('ddss', this.actParams)

    },

    act(panduan, item) {

      this.dialogVisible = true

    },

    getRoleList() {

      this.$get('/role/list', this.roleParams, res => {

        if(res.code == 200) {

          this.roleList = res.data.list

          console.log('管理员组', this.roleList)

        } else {

          this.$message({type: 'error', message: res.mgs || '获取管理员组失败!'})

        }

      })

    },

    getData() {

      this.$get('/merchant/list', {}, res => {

        console.log('管理员列表', res)

        if(res.code == 200) {

          this.list = res.data.data

        }

      })

    }

  },

  created() {

    this.getData()

    this.getRoleList()

  }

}

</script>

<style scoped>

.group {padding: 30px 20px; box-sizing: border-box;font-size: 14px;color: #2f2f2f;background-color: #fff;}

.center {display: flex;justify-content: space-between;align-items: center;}

.gtop {width: 100%;}

</style>