devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序+vant weapp表单数据双向绑定并实现表单校验_微信小程序使用van-field加校验

作者：Gausst松鼠会 | 2024-05-16 07:14:24

赞

踩

微信小程序使用van-field加校验

在用vant开发小程序过程中，发现van-field输入框中值改变之后，绑定的值并没有随着改变，需要手动绑定。

简单写一下实现方案

如下以输入框，和下拉选择为例

  1. <view class="goods-base">
  2.      <van-field label="安检通道号" name="checkPointName" value="{{ formData.checkPointName }}" data-name="checkPointName" error-message="{{checkData.checkPointName}}" required readonly right-icon="arrow" input-align="right" bind:click-input="onSelectCheckPointPicker" />
  3.      <van-field label="安检员工号" name="jobNo" value="{{ formData.jobNo }}" data-name="jobNo" error-message="{{checkData.jobNo}}" required placeholder="请填写" input-align="right" bind:input="inputValue" />
  4. </view>
  1. import WxValidate from '@/utils/WxValidate';
  2. Page({
  3.     data:{
  4.         formData:{
  5.             checkPointName: '',
  6.             jobNo: ''
  7.         },
  8.         checkData: {}, // 校验错误提示
  9.         rules:{
  10.             checkPointName: { required: true },
  11.             jobNo: { required:true }
  12.         },
  13.         message:{
  14.             checkPointName: { required: '请选择' },
  15.             jobNo: { required:'请填写' }
  16.         }
  17.     },
  18.     // 获取输入值
  19.     inputValue(e) {
  20.         const param = e.currentTarget.dataset.name; //字段名 
  21.         const value = e.detail; //值 
  22.         const key=`formData.${param}`;
  23.         const msg=`checkData.${param}`;
  24.         this.setData({
  25.           [key]:value,
  26.           [msg]:'' //清空错误提示
  27.         })
  28.     },
  29.     initValidate() {
  30.         let rules = this.data.rules; 
  31.         let message =  this.data.message;
  32.         //实例化当前的验证规则和提示消息
  33.         this.WxValidate = new WxValidate(rules, message); 
  34.     },
  35.     checkFormData(params){
  36.         //清空所有错误提示
  37.         this.setData({
  38.           checkData:{}
  39.         })
  40.         let check = false;
  41.         this.initValidate();
  42.         check = this.WxValidate.checkForm(params);
  43.         if (!check) {
  44.             //表单元素验证不通过，此处给出相应提示
  45.             let error = this.WxValidate.errorList;
  46.             error.forEach((item)=>{
  47.               const element = item;
  48.               const name = `checkData.${element.param}`;
  49.               this.setData({
  50.                 [name]:element.msg
  51.               })
  52.             })
  53.             return false;
  54.         }else{
  55.             return true;
  56.         }
  57.     },
  58.     onLoad(options) {
  59.         this.initValidate();
  60.     },
  61. })

WxValidate.js 

  1. /**
  2.  * 表单验证
  3.  *
  4.  * @param {Object} rules 验证字段的规则
  5.  * @param {Object} messages 验证字段的提示信息
  6.  *
  7.  */
  8.  class WxValidate {
  9.   constructor(rules = {}, messages = {}) {
  10.       Object.assign(this, {
  11.           data: {},
  12.           rules,
  13.           messages,
  14.       })
  15.       this.__init()
  16.   }
  17.  
  18.   /**
  19.    * __init
  20.    */
  21.   __init() {
  22.       this.__initMethods()
  23.       this.__initDefaults()
  24.       this.__initData()
  25.   }
  26.  
  27.   /**
  28.    * 初始化数据
  29.    */
  30.   __initData() {
  31.       this.form = {}
  32.       this.errorList = []
  33.   }
  34.  
  35.   /**
  36.    * 初始化默认提示信息
  37.    */
  38.   __initDefaults() {
  39.       this.defaults = {
  40.           messages: {
  41.               required: '这是必填字段。',
  42.               email: '请输入有效的电子邮件地址。',
  43.               tel: '请输入11位的手机号码。',
  44.               url: '请输入有效的网址。',
  45.               date: '请输入有效的日期。',
  46.               dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。',
  47.               number: '请输入有效的数字。',
  48.               digits: '只能输入数字。',
  49.               idcard: '请输入18位的有效身份证。',
  50.               equalTo: this.formatTpl('输入值必须和 {0} 相同。'),
  51.               contains: this.formatTpl('输入值必须包含 {0}。'),
  52.               minlength: this.formatTpl('最少要输入 {0} 个字符。'),
  53.               maxlength: this.formatTpl('最多可以输入 {0} 个字符。'),
  54.               rangelength: this.formatTpl('请输入长度在 {0} 到 {1} 之间的字符。'),
  55.               min: this.formatTpl('请输入不小于 {0} 的数值。'),
  56.               max: this.formatTpl('请输入不大于 {0} 的数值。'),
  57.               range: this.formatTpl('请输入范围在 {0} 到 {1} 之间的数值。'),
  58.           }
  59.       }
  60.   }
  61.  
  62.   /**
  63.    * 初始化默认验证方法
  64.    */
  65.   __initMethods() {
  66.       const that = this
  67.       that.methods = {
  68.           /**
  69.            * 验证必填元素
  70.            */
  71.           required(value, param) {
  72.               if (!that.depend(param)) {
  73.                   return 'dependency-mismatch'
  74.               } else if (typeof value === 'number') {
  75.                   value = value.toString()
  76.               } else if (typeof value === 'boolean') {
  77.                   return !0
  78.               }
  79.  
  80.               return value.length > 0
  81.           },
  82.           /**
  83.            * 验证电子邮箱格式
  84.            */
  85.           email(value) {
  86.               return that.optional(value) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value)
  87.           },
  88.           /**
  89.            * 验证手机格式
  90.            */
  91.           tel(value) {
  92.               return that.optional(value) || /^1[34578]\d{9}$/.test(value)
  93.           },
  94.           /**
  95.            * 验证URL格式
  96.            */
  97.           url(value) {
  98.               return that.optional(value) || /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value)
  99.           },
  100.           /**
  101.            * 验证日期格式
  102.            */
  103.           date(value) {
  104.               return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())
  105.           },
  106.           /**
  107.            * 验证ISO类型的日期格式
  108.            */
  109.           dateISO(value) {
  110.               return that.optional(value) || /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
  111.           },
  112.           /**
  113.            * 验证十进制数字
  114.            */
  115.           number(value) {
  116.               return that.optional(value) || /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
  117.           },
  118.           /**
  119.            * 验证整数
  120.            */
  121.           digits(value) {
  122.               return that.optional(value) || /^\d+$/.test(value)
  123.           },
  124.           /**
  125.            * 验证身份证号码
  126.            */
  127.           idcard(value) {
  128.               return that.optional(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
  129.           },
  130.           /**
  131.            * 验证两个输入框的内容是否相同
  132.            */
  133.           equalTo(value, param) {
  134.               return that.optional(value) || value === that.data[param]
  135.           },
  136.           /**
  137.            * 验证是否包含某个值
  138.            */
  139.           contains(value, param) {
  140.               return that.optional(value) || value.indexOf(param) >= 0
  141.           },
  142.           /**
  143.            * 验证最小长度
  144.            */
  145.           minlength(value, param) {
  146.               return that.optional(value) || value.length >= param
  147.           },
  148.           /**
  149.            * 验证最大长度
  150.            */
  151.           maxlength(value, param) {
  152.               return that.optional(value) || value.length <= param
  153.           },
  154.           /**
  155.            * 验证一个长度范围[min, max]
  156.            */
  157.           rangelength(value, param) {
  158.               return that.optional(value) || (value.length >= param[0] && value.length <= param[1])
  159.           },
  160.           /**
  161.            * 验证最小值
  162.            */
  163.           min(value, param) {
  164.               return that.optional(value) || value >= param
  165.           },
  166.           /**
  167.            * 验证最大值
  168.            */
  169.           max(value, param) {
  170.               return that.optional(value) || value <= param
  171.           },
  172.           /**
  173.            * 验证一个值范围[min, max]
  174.            */
  175.           range(value, param) {
  176.               return that.optional(value) || (value >= param[0] && value <= param[1])
  177.           },
  178.       }
  179.   }
  180.  
  181.   /**
  182.    * 添加自定义验证方法
  183.    * @param {String} name 方法名
  184.    * @param {Function} method 函数体，接收两个参数(value, param)，value表示元素的值，param表示参数
  185.    * @param {String} message 提示信息
  186.    */
  187.   addMethod(name, method, message) {
  188.       this.methods[name] = method
  189.       this.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]
  190.   }
  191.  
  192.   /**
  193.    * 判断验证方法是否存在
  194.    */
  195.   isValidMethod(value) {
  196.       let methods = []
  197.       for (let method in this.methods) {
  198.           if (method && typeof this.methods[method] === 'function') {
  199.               methods.push(method)
  200.           }
  201.       }
  202.       return methods.indexOf(value) !== -1
  203.   }
  204.  
  205.   /**
  206.    * 格式化提示信息模板
  207.    */
  208.   formatTpl(source, params) {
  209.       const that = this
  210.       if (arguments.length === 1) {
  211.           return function() {
  212.               let args = Array.from(arguments)
  213.               args.unshift(source)
  214.               return that.formatTpl.apply(this, args)
  215.           }
  216.       }
  217.       if (params === undefined) {
  218.           return source
  219.       }
  220.       if (arguments.length > 2 && params.constructor !== Array) {
  221.           params = Array.from(arguments).slice(1)
  222.       }
  223.       if (params.constructor !== Array) {
  224.           params = [params]
  225.       }
  226.       params.forEach(function(n, i) {
  227.           source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function() {
  228.               return n
  229.           })
  230.       })
  231.       return source
  232.   }
  233.  
  234.   /**
  235.    * 判断规则依赖是否存在
  236.    */
  237.   depend(param) {
  238.       switch (typeof param) {
  239.           case 'boolean':
  240.               param = param
  241.               break
  242.           case 'string':
  243.               param = !!param.length
  244.               break
  245.           case 'function':
  246.               param = param()
  247.           default:
  248.               param = !0
  249.       }
  250.       return param
  251.   }
  252.  
  253.   /**
  254.    * 判断输入值是否为空
  255.    */
  256.   optional(value) {
  257.       return !this.methods.required(value) && 'dependency-mismatch'
  258.   }
  259.  
  260.   /**
  261.    * 获取自定义字段的提示信息
  262.    * @param {String} param 字段名
  263.    * @param {Object} rule 规则
  264.    */
  265.   customMessage(param, rule) {
  266.       const params = this.messages[param]
  267.       const isObject = typeof params === 'object'
  268.       if (params && isObject) {
  269.         return params[rule.method];
  270.       }
  271.   }
  272.   /**
  273.    * 获取某个指定字段的提示信息
  274.    * @param {String} param 字段名
  275.    * @param {Object} rule 规则
  276.    */
  277.   defaultMessage(param, rule) {
  278.       let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]
  279.       let type = typeof message
  280.  
  281.       if (type === 'undefined') {
  282.           message = `Warning: No message defined for ${rule.method}.`
  283.       } else if (type === 'function') {
  284.           message = message.call(this, rule.parameters)
  285.       }
  286.  
  287.       return message
  288.   }
  289.  
  290.   /**
  291.    * 缓存错误信息
  292.    * @param {String} param 字段名
  293.    * @param {Object} rule 规则
  294.    * @param {String} value 元素的值
  295.    */
  296.   formatTplAndAdd(param, rule, value) {
  297.       let msg = this.defaultMessage(param, rule)
  298.  
  299.       this.errorList.push({
  300.           param: param,
  301.           msg: msg,
  302.           value: value,
  303.       })
  304.   }
  305.  
  306.   /**
  307.    * 验证某个指定字段的规则
  308.    * @param {String} param 字段名
  309.    * @param {Object} rules 规则
  310.    * @param {Object} data 需要验证的数据对象
  311.    */
  312.   checkParam(param, rules, data) {
  313.  
  314.       // 缓存数据对象
  315.       this.data = data
  316.  
  317.       // 缓存字段对应的值
  318.       const value = data[param] !== null && data[param] !== undefined ? data[param] : ''
  319.  
  320.       // 遍历某个指定字段的所有规则，依次验证规则，否则缓存错误信息
  321.       for (let method in rules) {
  322.  
  323.           // 判断验证方法是否存在
  324.           if (this.isValidMethod(method)) {
  325.  
  326.               // 缓存规则的属性及值
  327.               const rule = {
  328.                   method: method,
  329.                   parameters: rules[method]
  330.               }
  331.  
  332.               // 调用验证方法
  333.               const result = this.methods[method](value, rule.parameters)
  334.  
  335.               // 若result返回值为dependency-mismatch，则说明该字段的值为空或非必填字段
  336.               if (result === 'dependency-mismatch') {
  337.                   continue
  338.               }
  339.  
  340.               this.setValue(param, method, result, value)
  341.  
  342.               // 判断是否通过验证，否则缓存错误信息，跳出循环
  343.               if (!result) {
  344.                   this.formatTplAndAdd(param, rule, value)
  345.                   break
  346.               }
  347.           }
  348.       }
  349.   }
  350.  
  351.   /**
  352.    * 设置字段的默认验证值
  353.    * @param {String} param 字段名
  354.    */
  355.   setView(param) {
  356.       this.form[param] = {
  357.           $name: param,
  358.           $valid: true,
  359.           $invalid: false,
  360.           $error: {},
  361.           $success: {},
  362.           $viewValue: ``,
  363.       }
  364.   }
  365.  
  366.   /**
  367.    * 设置字段的验证值
  368.    * @param {String} param 字段名
  369.    * @param {String} method 字段的方法
  370.    * @param {Boolean} result 是否通过验证
  371.    * @param {String} value 字段的值
  372.    */
  373.   setValue(param, method, result, value) {
  374.       const params = this.form[param]
  375.       params.$valid = result
  376.       params.$invalid = !result
  377.       params.$error[method] = !result
  378.       params.$success[method] = result
  379.       params.$viewValue = value
  380.   }
  381.  
  382.   /**
  383.    * 验证所有字段的规则，返回验证是否通过
  384.    * @param {Object} data 需要验证数据对象
  385.    */
  386.   checkForm(data) {
  387.       this.__initData()
  388.  
  389.       for (let param in this.rules) {
  390.         if(this.rules.hasOwnProperty(param)){
  391.             this.setView(param)
  392.             this.checkParam(param, this.rules[param], data)
  393.         }
  394.       }
  395.  
  396.       return this.valid()
  397.   }
  398.  
  399.   /**
  400.    * 返回验证是否通过
  401.    */
  402.   valid() {
  403.       return this.size() === 0
  404.   }
  405.  
  406.   /**
  407.    * 返回错误信息的个数
  408.    */
  409.   size() {
  410.       return this.errorList.length
  411.   }
  412.  
  413.   /**
  414.    * 返回所有错误信息
  415.    */
  416.   validationErrors() {
  417.       return this.errorList
  418.   }
  419. }
  420.  
  421. export default WxValidate;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/577442
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号