vue iview表单验证

html

在form标签中绑定 :rules=“ruleValidate” 及ref="appForm"属性
以下是编辑时触发的模态框，iview中的确认与取消按钮是定义好的，并且点击两个按钮后自动关闭模态框，若想自定义，可以参考Form标签后的div中的内容。

<!-- 编辑 -->
<Modal  v-model="appModel.show" :title="appModel.title"  :mask-closable="false">
    <Form :model="appForm"  :rules="ruleValidate"  ref="appForm" :label-width="80">
      <FormItem label="Logo:" prop="logo">
        <Upload style="width: 50px"
            :before-upload="handleUpload"
            accept="image/jpg, image/jpeg, image/png"
            :on-format-error="handleFormatError"
            :max-size="512"
            type="drag">
            <div style="position: relative;padding:5px 0;">
                <Icon type="ios-camera" size="30" style="color: #3BBE9B"></Icon>
                ![在这里插入图片描述]()
            </div>
        </Upload>
      </FormItem>
      <FormItem label="Name:" prop="name">
        <Input v-model="appForm.name" style="width:360px" />
      </FormItem>
      <FormItem label="Domain:" prop="domain">
        <Input v-model="appForm.domain" style="width:360px" />
      </FormItem>
      <FormItem label="Type:" prop="type">
        <Input v-model="appForm.type" style="width:360px" />
      </FormItem>
      <FormItem label="IP:" prop="ip">
        <Input v-model="appForm.ip" style="width:360px" />
      </FormItem>
    </Form>
    <div slot="footer" style="text-align:center;">
      <Button type="success" @click="okSave" class="btn">Save</Button>
    </div>
</Modal>

data中

	//验证
   ruleValidate:{
     name:[//此处name与标签中prop属性的值相对应
       {required: true,message:'The name cannot be empty!',trigger: 'blur'},
       {trigger: 'change',validator: (rule, value, callback) => {
         var validate_name = /^[A-Za-z0-9]{6,20}$/;
         if(value == undefined || value.length == 0){
           callback();
         }else if(!validate_name.test(value)){
           callback(new Error("Format should be 6-20 numbers or letters!"));
           //Please enter a 6-20 digit number or letter
         }else{
           callback();
         }
       }}
     ],
     ip:[
       {required: true,message:'The ip cannot be empty!',trigger: 'blur'},
       {trigger: 'change',validator: (rule, value, callback) => {
         var validate_ip = /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g;
         if(value == undefined || value.length == 0){
           callback();
         }else if(!validate_ip.test(value)){
           callback(new Error("The ip format is not correct!"));
         }else{
           callback();
         }
       }}
     ],
     logo: [
       {required: true,message:'The logo can not be empty!',trigger: 'change'}
     ],
     type: [
       {required: true,message:'The type can not be empty!',trigger: 'change'},
       {trigger: 'change',validator: (rule, value, callback) => {
         var validate_type = /^[A-Za-z0-9]{6,20}$/;
         if(value == undefined || value.length == 0){
           callback();
         }else if(!validate_type.test(value)){
           callback(new Error("Format should be 6-20 numbers or letters!"));
           //Please enter a 6-20 digit number or letter
         }else{
           callback();
         }
       }}
     ],
     domain: [
       {required: true,message:'The domain can not be empty!',trigger: 'change'},
       ///^http(s)?:\/\/(.*?)\
       {trigger: 'change',validator: (rule, value, callback) => {
         var validate_domain = /^http(s)?:\/\/(.*?)\//;
         if(value == undefined || value.length == 0){
           callback();
         }else if(!validate_domain.test(value)){
           callback(new Error("The domain format is not correct!"));
         }else{
           callback();
         }
       }}
     ]

   }

js中

验证通过的操作在以下代码中写

  this.$refs.appForm.validate(async valid => {
            if (valid == true) { }
 }

//保存
async okSave(){
  var url = '';
  if(this.appModel.title == 'Add'){
    url = 'api/application/insert';
  }
  if(this.appModel.title == 'Edit'){
    url = 'api/application/update';
  }
  this.$refs.appForm.validate(async valid => {
            if (valid == true) {
              const{data:res} = await this.$http.post(url,{
                name : this.appForm.name,
                domain : this.appForm.domain,
                ip : this.appForm.ip,
                logo : this.appForm.logo,
                type : this.appForm.type
              });
              if(res.code == 200){
                this.$Message.success("Successful operation!");
                this.appModel.show = false;
                this.initTable();
              }else if(res.code != 200){
                this.$Message.error("Operation failed!");
              }
            }
  })
  
},