Vue Element表单绑定（二）表单验证1

最新推荐文章于 2022-12-30 12:25:04 发布

weixin_34032827

最新推荐文章于 2022-12-30 12:25:04 发布

阅读量169

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/tianma3798/blog/3010171

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、数字类型验证 type=number

<template>
  <div>
    <h3>数字类型验证</h3>
    <el-form :inline="true" :model="numForm" ref="numForm" class="demo-ruleForm">
      <el-form-item
        label="年龄"
        prop="age"
        :rules="[
        {required:true,message:'年龄不能为空'},
        {type:'number',message:'年龄必须为数字'}
        ]"
      >
        <el-input type="age" v-model.number="numForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numForm')">提交</el-button>
        <el-button @click="resetForm('numForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

export default {
  data() {
    return {
      numForm: {}
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit1");
        } else {
          return false;
        }
      });
    },
    //重置操作
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};

二、邮箱类型验证 type=emial

<template>
  <div>
    <h3>邮箱验证</h3>
    <el-form :inline="true" :model="numForm" ref="numForm" class="demo-ruleForm">
      <el-form-item
        label="邮箱"
        prop="email"
        :rules="[
        {required:true,message:'邮箱不能为空'},
        {type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
        ]"
      >
        <el-input type="email" v-model="numForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numForm')">提交</el-button>
        <el-button @click="resetForm('numForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

三、url类型验证,type=url

<template>
  <div>
    <h3>Url验证</h3>
    <el-form :model="numForm" ref="numForm" class="demo-ruleForm">
      <el-form-item
        label="链接地址"
        prop="url"
        :rules="[
        {required:true,message:'链接不能为空'},
        {type:'url',message:'请输入正确的链接',trigger:'blur'}
        ]"
      >
        <el-input type="url" v-model="numForm.url"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numForm')">提交</el-button>
        <el-button @click="resetForm('numForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

四、字符长度类型,min,max

<template>
  <div>
    <h3>字符长度类型</h3>
    <el-form :model="numForm" ref="numForm" class="demo-ruleForm">
      <el-form-item
        label="标题"
        prop="title"
        :rules="[
        {required:true,message:'标题不能为空'},
        {min:3,max:10,message:'字符长度3-10之间',trigger:'blur'}
        ]"
      >
        <el-input type="title" v-model="numForm.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numForm')">提交</el-button>
        <el-button @click="resetForm('numForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

五、手机号类型,使用自定义规则：rules

<template>
  <div>
    <h3>手机号类型</h3>
    <el-form :model="numForm" :rules='rules' ref="numForm" class="demo-ruleForm">
      <el-form-item label="手机号" prop="mobile">
        <el-input type="mobile" v-model="numForm.mobile"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numForm')">提交</el-button>
        <el-button @click="resetForm('numForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

js定义验证规则

//定义一个全局的变量，谁用谁知道
var validPhone = (rule, value, callback) => {
  if (!value) {
   return callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
// 手机号验证
function isvalidPhone(str) {
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
  return reg.test(str);
}

export default {
  data() {
    return {
      numForm: {
          mobile:''
      },
      rules: {
        mobile: [
          {
              required:true,
            trigger: "blur",
            validator: validPhone
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert(JSON.stringify(this.numForm));
        } else {
          return false;
        }
      });
    },
    //重置操作
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};

Vue Element表单绑定（一）

Vue 动态加载组件方式整理

vue中使用jquery报错 $ is not defined

转载于:https://my.oschina.net/tianma3798/blog/3010171