vue前端框架 iview UI库，部分表单验证

vue前端框架 iview UI库，部分表单验证。

注意，对话框中的表单标签要用对，才能让验证信息生效。

 <!-- 表单编辑区 -->
  <Modal v-model="visiable" title="基本信息"  @on-ok="handleSubmit" :loading="loading" width="750">     
      <Form ref="obj" :model="obj" :label-width="80" :rules="ruleValidate1" >
			<Row>
                       <Col span="20" offset="1">
                          <Form-Item label="状态" prop="status">
                            <RadioGroup v-model="obj.status">
                             <Radio label="1" >启用</Radio>
                             <Radio label="2" >禁用</Radio>
                            </RadioGroup> 

                        </Form-Item>
                      </Col>
                </Row>
             <Row>
                    <Col span="20" offset="1">
                        <Form-item label="账号" prop="account_number">
                         <Input v-model="obj.account_number" placeholder="请输入账号，必填"></Input>
                  </Form-item>
                  </Col>
                  </Row>
                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="登录密码" prop="password">
	 <Input type="password" v-model="obj.password"placeholder="请输入密码，必填">	</Input>
                        </Form-Item>
                      </Col>
                </Row>
          <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="确认密码" prop="repassword">
<Input type="password" v-model="obj.repassword" placeholder="请输入密码，必填">		   </Input>
                        </Form-Item>
                      </Col>
           </Row>

                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="角色选择" prop="role_id">
                          <Select v-model="obj.role_id" clearable="clearable" style="width:200px">
                              <Option v-for="item in dictTypeList" :value=item.id >{{ item.role_name}}</Option>
                          </Select> 
                        </Form-Item>
                      </Col>
                </Row>
                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="备注" prop="remark">
                          <Input  type="textarea" v-model="obj.remark" :autosize="{minRows: 2,maxRows: 5}" style="width: 100%;" ></Input>
                        </Form-Item>
                      </Col>
                </Row>

                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="姓名" prop="username" >
                          <Input v-model="obj.username" placeholder="请输入姓名，必填"></Input>
                        </Form-Item>
                      </Col>
                </Row>

                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="手机" prop="phone">
                          <Input v-model="obj.phone" placeholder="请输入手机号"></Input>
                        </Form-Item>
                      </Col>
                </Row>

                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="电话" prop="telephone">
                          <Input v-model="obj.telephone" placeholder="请输入电话"></Input>
                        </Form-Item>
                      </Col>
                </Row>

                <Row>
                       <Col span="20" offset="1">
                          <Form-Item label="邮箱" prop="email">
                          <Input v-model="obj.email" placeholder="请输入邮件"></Input>
                        </Form-Item>
                      </Col>
                </Row>
    </Form> 
</Modal>



  return {
  
    loading: true,   //组件是否正在加载
    visiable: false, //编辑窗是否可见
    isEdit: false, //是否处于编辑状态
    obj:{

 
     //验证的集合
    formValidate: {
                status: '',
                account_number:"",
                password:"",
                repassword: '',
                role_id:"",
                remark:"",
                username:"",
                phone:"",
                telephone:"",
                email:"",
            },

    ruleValidate1: {
      status: [{ required: true, message: '请选择状态', trigger: 'change'}],
      account_number:[{ required: true, message: '账号不能为空', trigger: 'blur' },{ max: 100, message: '最多输入100位', type:'string', trigger: 'change' }],
      password:[{ validator: validatePass, trigger: 'blur' }],
      repassword:[{ validator: validatePassCheck, trigger: 'blur' }],
      remark: [{ max: 200, message: '最多输入200位', type:'string', trigger: 'change' }],
      username:[{ required: true, message: '姓名不能为空', trigger: 'blur' },{ max: 100, message: '最多输入100位', type:'string', trigger: 'change' }],
      phone: [{ max: 40, message: '最多输入40位', type:'string', trigger: 'change' }],
      telephone: [{ max: 40, message: '最多输入40位', type:'string', trigger: 'change' }],
      email: [{ type: 'email', message: '请输入邮件格式！', trigger: 'blur' }],
    },
   handleSubmit(){  //提交表单
    var _This = this;
	  this.$refs['obj'].validate((valid) => { //验证表单信息
    		if(valid) { 
    
   		var url = _This.APP_API_PATH.add_adminMan_one;

        //是否是修改
        if(_This.isEdit){
          url = _This.APP_API_PATH.update_adminMan_one;
        }
        this.apputil.ajax_update(this, url, this.obj,  true, function() {
            _This.doQuery();
            _This.obj = {};
            _This.visiable = false;
        });
    }

//重新让表单，加载Loading变量为true        
    });
    setTimeout(() => {
          _This.loading = false;
           _This.$nextTick(() => {
                _This.loading = true;
              }
            );
    }, 500);//延迟500
    }