关于微信小程序原生的表单验证

微信官方是没有提供的，需要我们自己来定义。比较好用的一款第三方表单验证插件是WxValidate.js。

下载地址：https://github.com/wux-weapp/wx-extend/tree/master/src/assets/plugins/wx-validate

使用步骤 - 1. 引入WxValidate.js文件

把放入WxValidate.js文件微信小程序utils目录下。

在需要进行表单验证的页面引入：

import WxValidate from '../../../utils/WxValidate'

使用步骤 - 2. 配置验证规则

首先要在小程序的data属性里面配置好表单的名字：

wxml页面的input框里面的value值一定要和js里面的声明的对应上,input的name值也是一样。

<form bindsubmit="formSubmit"><!-- 表单内容 --><input name="nickName" value="{{form.nickName}}"/><input name="userName" value="{{form.userName}}"/><input  name="phonenumber" value="{{form.phonenumber}}"/><input  name="password" value="{{form.password}}"/><input name="remark" value="{{form.remark}}"/><button form-type="submit">添加用户</button>
</form>

然后定义校验规则：

initValidate() {const rules = {nickName: {required: true},userName: {required: true,rangelength: [2,20]},password: {required: true,rangelength: [5,20]},phonenumber : {tel: true},deptId : {required: true}}const messages = {nickName: {required: '单位名称不能为空'},userName: {required: '账号不能为空',rangelength : '账号长度在2到20之间'},password: {required: '密码不能为空',rangelength : '密码长度在5到20之间'},deptId : {required: '所属辖区不能为空'}}this.WxValidate = new WxValidate(rules, messages)},

然后在onLoad函数中初始化校验规则：

onLoad(options) {this.initValidate();},

最后写提交表单函数：

  // 提交表单formSubmit: function (e) {console.log('表单数据：', e.detail.value)const params = e.detail.value;//校验表单if (!this.WxValidate.checkForm(params)) {const error = this.WxValidate.errorList[0];wx.showModal({content: error,showCancel: false})return false;} else {// 执行request请求}},

建议多看看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[34578]\d{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

【微信小程序】表单验证WxValidate.js使用相关推荐

微信小程序表单 form 组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 表单.将组件内的用户输入的switch input checkbox slider radio picker 提交. 当点击 form 表单 ...
微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）
js代码 Page({/*** 页面的初始数据*/data: {indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,p ...
微信小程序***实现身份验证
标题微信小程序***实现身份验证本次实现了身份验证功能,本功能需要提交身份证正面照片,反面照片,手持身份证等四张张照片,提交成功后等待工作平台审核,审核成功后即可完成身份验证. WXML: JS: ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
微信小程序-拼图动态验证
微信小程序-拼图动态验证一.创建自定义组件verification-puzzle 二.在index页面使用一.创建自定义组件verification-puzzle verification-puz ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
微信小程序开发日志——面向对象的JS编程
微信小程序开发日志--面向对象的JS编程前言不知道有多少小伙伴和之前的我一样,微信小程序的js部分都是用面向过程的方式写的,最后的结果就是代码非常长,其实刚刚写完还好,自己也都清楚哪些部分是做什么 ...
通过新浪云部署NideShop微信小程序商城（基于Node.js+MySQL+ThinkJS）
本文档为微信小程序商城NideShop项目的安装部署教程(GitHub),欢迎star 一.购买新浪云SAE 为什么选择SAE? 免费二级域名和支持https访问,不用备案,可用于做微信小程序服务器. ...
微信小程序调用指纹验证
微信小程序调用指纹验证共有三个相关的接口 1.wx.checkIsSupportSoterAuthentication() 获取本机支持的 SOTER 生物认证方式 wx.checkIsSupport ...
新浪云node加mysql_通过新浪云部署NideShop微信小程序商城（基于Node.js+MySQL+ThinkJS）...
一.购买新浪云SAE为什么选择SAE? 免费二级域名和支持https访问,不用备案,可用于做微信小程序服务器. 选择对应的部署环境自定义 -> 开发言语:自定义 -> 运行环境:云容器 ...

【微信小程序】表单验证WxValidate.js使用

关于微信小程序原生的表单验证

使用步骤 - 1. 引入WxValidate.js文件

使用步骤 - 2. 配置验证规则

建议多看看WxValidate.js源码，写的很好

【微信小程序】表单验证WxValidate.js使用相关推荐

最新文章

热门文章