zoukankan      html  css  js  c++  java
  • iview中的表单组件Input输入框限制输入内容方法

    <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=" 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 (!/^0d{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" }]
      }
     
    }
     
     
     
     
     
     
     
     
     
        
      }
    }
     
  • 相关阅读:
    python基础之入门
    C#直接删除指定目录下的所有文件及文件夹(保留目录)
    删除Oracle文件、注册表
    WinRAR 激活码(KEY)
    用C#读取txt文件的方法(转)
    c# 生成 xml 文件
    Asp.Net 文件下载1——流下载(适用于大文件且防盗链)(转)
    Asp.Net异常:"由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值"的解决方法
    响应在此上下文中不可用 asp.net
    Ajax实现局部刷新
  • 原文地址:https://www.cnblogs.com/wssdx/p/12407819.html
Copyright © 2011-2022 走看看