微信小程序的表单验证

我们写vue项目的时侯经常会用一些ui框架，都会有表单验证
那小程序想要实现前端表单验证通过后再提交给后端怎么实现呢

首先，我们需要一个叫WxValidate.js的代码，网上会有下载一下，不想下载也可以直接复制下面的代码，在你的根目录（和pages平级）新建一个utils文件夹然后在里面新建一个WxValidate.js的文件，把代码复制粘贴进去

/*** 表单验证* * @param {Object} rules 验证字段的规则* @param {Object} messages 验证字段的提示信息* */
class WxValidate {constructor(rules = {}, messages = {}) {Object.assign(this, {data: {},rules,messages,})this.__init()}/*** __init*/__init() {this.__initMethods()this.__initDefaults()this.__initData()}/*** 初始化数据*/__initData() {this.form = {}this.errorList = []}/*** 初始化默认提示信息*/__initDefaults() {this.defaults = {messages: {required: '这是必填字段。',email: '请输入有效的电子邮件地址。',tel: '请输入11位的手机号码。',url: '请输入有效的网址。',date: '请输入有效的日期。',dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。',number: '请输入有效的数字。',digits: '只能输入数字。',idcard: '请输入18位的有效身份证。',equalTo: this.formatTpl('输入值必须和 {0} 相同。'),contains: this.formatTpl('输入值必须包含 {0}。'),minlength: this.formatTpl('最少要输入 {0} 个字符。'),maxlength: this.formatTpl('最多可以输入 {0} 个字符。'),rangelength: this.formatTpl('请输入长度在 {0} 到 {1} 之间的字符。'),min: this.formatTpl('请输入不小于 {0} 的数值。'),max: this.formatTpl('请输入不大于 {0} 的数值。'),range: this.formatTpl('请输入范围在 {0} 到 {1} 之间的数值。'),}}}/*** 初始化默认验证方法*/__initMethods() {const that = thisthat.methods = {/*** 验证必填元素*/required(value, param) {if (!that.depend(param)) {return 'dependency-mismatch'} else if (typeof value === 'number') {value = value.toString()} else if (typeof value === 'boolean') {return !0}return value.length > 0},/*** 验证电子邮箱格式*/email(value) {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)},/*** 验证手机格式*/tel(value) {return that.optional(value) || /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)},/*** 验证URL格式*/url(value) {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)},/*** 验证日期格式*/date(value) {return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())},/*** 验证ISO类型的日期格式*/dateISO(value) {return that.optional(value) || /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)},/*** 验证十进制数字*/number(value) {return that.optional(value) || /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)},/*** 验证整数*/digits(value) {return that.optional(value) || /^\d+$/.test(value)},/*** 验证身份证号码*/idcard(value) {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)},/*** 验证两个输入框的内容是否相同*/equalTo(value, param) {return that.optional(value) || value === that.data[param]},/*** 验证是否包含某个值*/contains(value, param) {return that.optional(value) || value.indexOf(param) >= 0},/*** 验证最小长度*/minlength(value, param) {return that.optional(value) || value.length >= param},/*** 验证最大长度*/maxlength(value, param) {return that.optional(value) || value.length <= param},/*** 验证一个长度范围[min, max]*/rangelength(value, param) {return that.optional(value) || (value.length >= param[0] && value.length <= param[1])},/*** 验证最小值*/min(value, param) {return that.optional(value) || value >= param},/*** 验证最大值*/max(value, param) {return that.optional(value) || value <= param},/*** 验证一个值范围[min, max]*/range(value, param) {return that.optional(value) || (value >= param[0] && value <= param[1])},}}/*** 添加自定义验证方法* @param {String} name 方法名* @param {Function} method 函数体，接收两个参数(value, param)，value表示元素的值，param表示参数* @param {String} message 提示信息*/addMethod(name, method, message) {this.methods[name] = methodthis.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]}/*** 判断验证方法是否存在*/isValidMethod(value) {let methods = []for (let method in this.methods) {if (method && typeof this.methods[method] === 'function') {methods.push(method)}}return methods.indexOf(value) !== -1}/*** 格式化提示信息模板*/formatTpl(source, params) {const that = thisif (arguments.length === 1) {return function() {let args = Array.from(arguments)args.unshift(source)return that.formatTpl.apply(this, args)}}if (params === undefined) {return source}if (arguments.length > 2 && params.constructor !== Array) {params = Array.from(arguments).slice(1)}if (params.constructor !== Array) {params = [params]}params.forEach(function(n, i) {source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function() {return n})})return source}/*** 判断规则依赖是否存在*/depend(param) {switch (typeof param) {case 'boolean':param = parambreakcase 'string':param = !!param.lengthbreakcase 'function':param = param()default:param = !0}return param}/*** 判断输入值是否为空*/optional(value) {return !this.methods.required(value) && 'dependency-mismatch'}/*** 获取自定义字段的提示信息* @param {String} param 字段名* @param {Object} rule 规则*/customMessage(param, rule) {const params = this.messages[param]const isObject = typeof params === 'object'if (params && isObject) return params[rule.method]}/*** 获取某个指定字段的提示信息* @param {String} param 字段名* @param {Object} rule 规则*/defaultMessage(param, rule) {let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]let type = typeof messageif (type === 'undefined') {message = `Warning: No message defined for ${rule.method}.`} else if (type === 'function') {message = message.call(this, rule.parameters)}return message}/*** 缓存错误信息* @param {String} param 字段名* @param {Object} rule 规则* @param {String} value 元素的值*/formatTplAndAdd(param, rule, value) {let msg = this.defaultMessage(param, rule)this.errorList.push({param: param,msg: msg,value: value,})}/*** 验证某个指定字段的规则* @param {String} param 字段名* @param {Object} rules 规则* @param {Object} data 需要验证的数据对象*/checkParam(param, rules, data) {// 缓存数据对象this.data = data// 缓存字段对应的值const value = data[param] !== null && data[param] !== undefined ? data[param] : ''// 遍历某个指定字段的所有规则，依次验证规则，否则缓存错误信息for (let method in rules) {// 判断验证方法是否存在if (this.isValidMethod(method)) {// 缓存规则的属性及值const rule = {method: method,parameters: rules[method]}// 调用验证方法const result = this.methods[method](value, rule.parameters)// 若result返回值为dependency-mismatch，则说明该字段的值为空或非必填字段if (result === 'dependency-mismatch') {continue}this.setValue(param, method, result, value)// 判断是否通过验证，否则缓存错误信息，跳出循环if (!result) {this.formatTplAndAdd(param, rule, value)break}}}}/*** 设置字段的默认验证值* @param {String} param 字段名*/setView(param) {this.form[param] = {$name: param,$valid: true,$invalid: false,$error: {},$success: {},$viewValue: ``,}}/*** 设置字段的验证值* @param {String} param 字段名* @param {String} method 字段的方法* @param {Boolean} result 是否通过验证* @param {String} value 字段的值*/setValue(param, method, result, value) {const params = this.form[param]params.$valid = resultparams.$invalid = !resultparams.$error[method] = !resultparams.$success[method] = resultparams.$viewValue = value}/*** 验证所有字段的规则，返回验证是否通过* @param {Object} data 需要验证数据对象*/checkForm(data) {this.__initData()for (let param in this.rules) {this.setView(param)this.checkParam(param, this.rules[param], data)}return this.valid()}/*** 返回验证是否通过*/valid() {return this.size() === 0}/*** 返回错误信息的个数*/size() {return this.errorList.length}/*** 返回所有错误信息*/validationErrors() {return this.errorList}
}export default WxValidate

第二步：在你表单的那个页面的js文件中引入并且初始化表单验证规则

import WxValidate from "../../utils/WxValidate";
Page({/*** 页面的初始数据*/data: {//产品条码deviceMark: "",//产品名称deviceName: "",//联系人名字linkMan: "",//联系人idlinkManId: "",//故障描述description: "",//日期选择器serTime: '',
},//提交表单submit() {let that = thislet params = {deviceMark: that.data.deviceMark,deviceSn: that.data.deviceMark,deviceName: that.data.deviceName,linkManId: that.data.linkManId,description: that.data.description,serTime: that.data.serTime,}//校验表单if (!that.WxValidate.checkForm(params)) {const error = that.WxValidate.errorList[0]wx.$msg(error.msg)} else {//提交表单 }},//初始化表单验证规则initValidate() {let rules = {deviceMark: {required: true,},deviceName: {required: true,},linkManId: {required: true,},description: {required: true,},serTime: {required: true,},}let message = {deviceMark: {required: '请输入产品条码',},deviceName: {required: '请输入产品名称',},linkManId: {required: '请选择联系人',},description: {required: '请输入故障描述',},serTime: {required: '请选择期望服务时间',},}//实例化当前的验证规则和提示消息this.WxValidate = new WxValidate(rules, message);},onLoad: function () {this.initValidate()},})

最后，我的因为没有手机号邮箱这些判断，只有必填项的判断，如果有手机号的还可以验证手机号等等。。。
总之，WxValidate.js还是非常好用的

微信小程序的表单验证相关推荐

微信小程序插件---表单验证篇
微信小程序插件---表单验证篇项目下载地址 WxValidate - 表单验证插件介绍该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电 ...
微信小程序 form表单验证
业务需求:微信小程序提交表单的时候必填的项要提示,还要电话要校验首页,先搞一个校验的公共方法 validate.js /*** 表单验证* * @param {Object} rules 验证字段的 ...
【微信小程序】表单验证提交
效果图: 说明:点击一键预约提交表单时我们需要验证一些必填项以及它们的格式.微信小程序表单验证跟vue的input双向绑定不同,微信小程序只能通过button按钮提交form表单,然后通过监听表单提交 ...
微信提示在客户端提交验证_微信小程序之表单验证
1 /**2 * 表单验证3 *4 * @param {Object} rules 验证字段的规则5 * @param {Object} messages 验证字段的提示信息6 *7 */ 8 cla ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
【微信小程序】表单提交验证及获取表单输入的值
效果图: 说明:请选择房屋所在城市的效果是省市区选择器,刚开始我们可能直接在picker选择器中直接包含一个input输入框实现,但是这样的话点击选择的话可能聚焦在输入框中,我们想要的效果是点击的时候 ...
[微信小程序]提交表单返回成功后自动清空表单的值
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: ...
微信小程序-提交表单成功弹窗提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast() 效果如下相关参数如下代码很简单 wxml: <button type="pri ...
wps表单小程序服务器错误,微信小程序WPS表单怎么在钉钉使用
微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下. table.wxml head1 head2 head3 {{item.code}} {{item. ...

微信小程序的表单验证

微信小程序的表单验证相关推荐

最新文章

热门文章