zoukankan      html  css  js  c++  java
  • Element Form表单验证

    <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="110px">

    <el-form-item label="活动名称" prop="name" style=" 425px;">
    <el-input v-model="addForm.name" size="medium" placeholder="请填写活动名称"></el-input>
    </el-form-item>

    <el-form-item label="联系电话" prop="tel" style=" 425px;">
    <el-input v-model="addForm.tel" size="medium" placeholder="请填写联系电话"></el-input>
    </el-form-item>

    <el-form-item label="需要人数" prop="personNumber" style=" 425px;">
    <el-input v-model="addForm.personNumber" size="medium" placeholder="请填写活动需要人数"></el-input>
    </el-form-item>
    <el-form-item label="最大报名人数" prop="maxPersonNumber" style=" 425px;">
    <el-input v-model="addForm.maxPersonNumber" size="medium" placeholder="请填写活动最大报名人数"></el-input>
    </el-form-item>

    </el-form>

    export default {

    data() {

    var checkPhone = (rule, value, callback) => {
    if (!value) {
    return callback(new Error('手机号不能为空'));
    } else {
    const reg = /^1[3|4|5|7|8][0-9]d{8}$/
    if (reg.test(value)) {
    callback();
    } else {
    return callback(new Error('请输入正确的手机号'));
    }
    }
    };

    var checkpersonNumber = (rule, value, callback) => {
    if (Number.isInteger(Number(value)) && Number(value) > 0) {
    if (this.addForm.maxPersonNumber != "") {
    if (value > Number(this.addForm.maxPersonNumber)) {
    callback(new Error("需要人数不能大于最大报名人数"));
    } else {
    callback();
    }
    } else {
    callback();
    }
    } else {
    callback(new Error("请输入有效数字"));
    }
    };
    var checkMaxpersonNumber = (rule, value, callback) => {
    if (Number.isInteger(Number(value)) && Number(value) > 0) {
    if (this.addForm.personNumber != "") {
    if (value < Number(this.addForm.personNumber)) {
    callback(new Error("最大报名人数不能小于需要人数"));
    } else {
    callback();
    }
    } else {
    callback();
    }
    } else {
    callback(new Error("请输入大于0的有效数字"));
    }
    };

    return {

    addRules: {
    name: [{
    required: true,
    message: "请输入活动名称",
    trigger: "blur"
    }],

    tel: [{
    required: true,
    validator: checkPhone,
    trigger: 'blur'
    }],

    personNumber: [{
    required: true,
    validator: checkpersonNumber,
    trigger: "blur"
    }],
    maxPersonNumber: [{
    required: true,
    validator: checkMaxpersonNumber,
    trigger: "blur"
    }],
    },

    }

    }

    },

    methods: {

    submitForm() {
    this.$refs.addForm.validate((valid) => {
    if (valid) {
    //验证成功执行
    that.$router.push({
    path: "/partybuilding/activity"
    });
    } else {
    that.$message.error(response.data.msg);
    }
    }).catch(function(err) {
    console.log(err);
    });
    } else {
    //定位错误位置
    setTimeout(() => {
    var isError = document.getElementsByClassName("is-error");
    isError[0].querySelector('input').focus();
    }, 100);
    return false;
    }
    });
    },

    }

  • 相关阅读:
    字典树入门
    Cyclic Nacklace HDU 3746 KMP 循环节
    KMP字符串匹配 模板 洛谷 P3375
    Phone List POJ-3630 字典树 or 暴力
    stringstream istringstream ostringstream 三者的区别
    单词数 HDU 2072 字符串输入控制
    逆序单词 HIhoCoder 1366 字典树
    input框中修改placeholder的样式
    如何使用$.each()与$().each()以及他们的区别
    css解决input的阴影
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11652614.html
Copyright © 2011-2022 走看看