首页 > 其他 > 详细

iview中的表单组件Input输入框限制输入内容方法

时间:2020-03-04 10:35:18      阅读:1441      评论:0      收藏:0      [点我收藏+]
<Form ref="formInline" :model="formInline" :rules="ruleValidate" :label-width="100" :show-message="true">
  <FormItem label="供应商名称" prop="vendorName">
              <Input type="text" v-model="formInline.vendorName" style="width: 200px;" :disabled="inpDisabled"></Input>
  </FormItem>
</Form>
export default {
  data(){
         
//供应商编码验证
    const validateCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("供应商编码不能为空"));
      } else if (!/^\d{5}$/.test(value)) {
        callback("请输入5位纯数字");
      } else {
        callback();
      }
    };
    //手机号验证
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback();
      } else if (!/^1[345678]\d{9}$/.test(value)) {
        callback("手机号格式不正确");
      } else {
        callback();
      }
    };
    //电话号验证
    const validatePhone1 = (rule, value, callback) => {
      if (!value) {
        return callback();
      } else if (!/^0\d{2,3}-\d{7,8}$$/.test(value)) {
        callback("请输入区号-号码格式");
      } else {
        callback();
      }
    };
    // 供应商名称
    const validateName1 = (rule, value, callback) => {
      if (!value) {
        return callback();
      } else if (!/^ +| +$/g.test(value)) {
        callback("不支持输入空格");//中文
      } else {
        callback();
      }
    };
 retrun{
 
  
ruleValidate: {
         vendorCode: [
            { required: true, message: ‘供应商编码不能为空‘, pattern: /.+/, trigger: ‘blur‘ }
           { required: true, validator: validateCode, trigger: "blur" }
         ],
        vendorName: [
          {
            required: true,
            message: "供应商名称不能为空",
            pattern: /.+/,
            trigger: "blur",
          },
          { required: true, validator: validateName1, trigger: "blur" }
        ],
  cvenHand2: [{ validator: validatePhone, trigger: "blur" }],
        cvenPhone: [{ validator: validatePhone1, trigger: "blur" }]
  }
 
}
 
 
 
 
 
 
 
 
 
    
  }
}
 

iview中的表单组件Input输入框限制输入内容方法

原文:https://www.cnblogs.com/wssdx/p/12407819.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!