微信小程序表單驗(yàn)證怎么弄?微信小程序正式上線，相信很多人都已經(jīng)開始使用了。簡單的表單驗(yàn)證，也不算是驗(yàn)證了，只是封裝了一下提示消息，免得自己去手動(dòng)寫if else(大家都懂吧)，用起來還行吧，自己動(dòng)手豐衣足食。

插件地址：https://github.com/skyvow/m-mall/blob/master/helpers/WxValidate.js

代碼示例：

/×*

* 創(chuàng)建驗(yàn)證字段的工廠函數(shù)

*

* @param {Object} rules 驗(yàn)證字段的規(guī)則

* @param {Object} messages 驗(yàn)證字段的提示信息

*

*/

class WxValidate {

constructor(rules = {}, messages = {}) {

Object.assign(this, {

rules,

messages,

})

this.__init()

}

/×*

* __init

*/

__init() {

this.__initMethods()

this.__initDefaults()

this.__initErrorList()

}

/×*

* 初始化錯(cuò)誤信息

*/

__initErrorList() {

this.errorList = []

}

/×*

* 初始化默認(rèn)提示信息

*/

__initDefaults() {

this.defaults = {

messages: {

required: &＃39;這是必填字段。&＃39;,

email: &＃39;請(qǐng)輸入有效的電子郵件地址。&＃39;,

tel: &＃39;請(qǐng)輸入11位的手機(jī)號(hào)碼。&＃39;,

url: &＃39;請(qǐng)輸入有效的網(wǎng)址。&＃39;,

date: &＃39;請(qǐng)輸入有效的日期。&＃39;,

dateISO: &＃39;請(qǐng)輸入有效的日期(ISO)，例如：2009-06-23，1998/01/22。&＃39;,

number: &＃39;請(qǐng)輸入有效的數(shù)字。&＃39;,

digits: &＃39;只能輸入數(shù)字。&＃39;,

idcard: &＃39;請(qǐng)輸入18位的有效身份證。&＃39;,

equalTo: this.formatTpl(&＃39;輸入值必須和 {0} 相同。&＃39;),

contains: this.formatTpl(&＃39;輸入值必須包含 {0}。&＃39;),

minlength: this.formatTpl(&＃39;最少要輸入 {0} 個(gè)字符。&＃39;),

maxlength: this.formatTpl(&＃39;最多可以輸入 {0} 個(gè)字符。&＃39;),

rangelength: this.formatTpl(&＃39;請(qǐng)輸入長度在 {0} 到 {1} 之間的字符。&＃39;),

min: this.formatTpl(&＃39;請(qǐng)輸入不小于 {0} 的數(shù)值。&＃39;),

max: this.formatTpl(&＃39;請(qǐng)輸入不大于 {0} 的數(shù)值。&＃39;),

range: this.formatTpl(&＃39;請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值。&＃39;),

}

}

}

/×*

* 初始化默認(rèn)驗(yàn)證方法

*/

__initMethods() {

const that = this

that.methods = {

/×*

* 驗(yàn)證必填元素

*/

required(value, param) {

if (!that.depend(param)) {

return &＃39;dependency-mismatch&＃39;

}

return value.length > 0

},

/×*

* 驗(yàn)證電子郵箱格式

*/

email(value) {

return that.optional(value) || /^[a-zA-Z0-9.!＃$%&&＃39;*+/=?^_`{|}~-]+@[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)

},

/×*

* 驗(yàn)證手機(jī)格式

*/

tel(value) {

return that.optional(value) || /^1[34578]d{9}$/.test(value)

},

/×*

* 驗(yàn)證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]|2d|3[0-1])(?:.d{1,3}){2})(?:[1-9]d?|1dd|2[01]d|22[0-3])(?:.(?:1?d{1,2}|2[0-4]d|25[0-5])){2}(?:.(?:[1-9]d?|1dd|2[0-4]d|25[0-4]))|(?:(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)(?:.(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)*(?:.(?:[a-zu00a1-uffff]{2,})).?)(?::d{2,5})?(?:[/?＃]S*)?$/i.test(value)

},

/×*

* 驗(yàn)證日期格式

*/

date(value) {

return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())

},

/×*

* 驗(yàn)證ISO類型的日期格式

*/

dateISO(value) {

return that.optional(value) || /^d{4}[/-](0?[1-9]|1[012])[/-](0?[1-9]|[12][0-9]|3[01])$/.test(value)

},

/×*

* 驗(yàn)證十進(jìn)制數(shù)字

*/

number(value) {

return that.optional(value) || /^(?:-?d+|-?d{1,3}(?:,d{3})+)?(?:.d+)?$/.test(value)

},

/×*

* 驗(yàn)證整數(shù)

*/

digits(value) {

return that.optional(value) || /^d+$/.test(value)

},

/×*

* 驗(yàn)證身份證號(hào)碼

*/

idcard(value) {

return that.optional(value) || /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}([0-9]|X)$/.test(value)

},

/×*

* 驗(yàn)證兩個(gè)輸入框的內(nèi)容是否相同

*/

equalTo(value, param) {

return that.optional(value) || value === that.scope.detail.value[param]

},

/×*

* 驗(yàn)證是否包含某個(gè)值

*/

contains(value, param) {

return that.optional(value) || value.indexOf(param) >= 0

},

/×*

* 驗(yàn)證最小長度

*/

minlength(value, param) {

return that.optional(value) || value.length >= param

},

/×*

* 驗(yàn)證比較大長度

*/

maxlength(value, param) {

return that.optional(value) || value.length <= param

},

/×*

* 驗(yàn)證一個(gè)長度范圍[min, max]

*/

rangelength(value, param) {

return that.optional(value) || (value.length >= param[0] && value.length <= param[1])

},

/×*

* 驗(yàn)證最小值

*/

min(value, param) {

return that.optional(value) || value >= param

},

/×*

* 驗(yàn)證比較大值

*/

max(value, param) {

return that.optional(value) || value <= param

},

/×*

* 驗(yàn)證一個(gè)值范圍[min, max]

*/

range(value, param) {

return that.optional(value) || (value >= param[0] && value <= param[1])

},

}

}

/×*

* 添加自定義驗(yàn)證方法

* @param {String} name 方法名

* @param {Function} method 函數(shù)體，接收兩個(gè)參數(shù)(value, param)，value表示元素的值，param表示參數(shù)

* @param {String} message 提示信息

*/

addMethod(name, method, message) {

this.methods[name] = method

this.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]

}

/×*

* 判斷驗(yàn)證方法是否存在

*/

isValidMethod(value) {

let methods = []

for(let method in this.methods) {

if (method && typeof this.methods[method] === &＃39;function&＃39;) {

methods.push(method)

}

}

return methods.indexOf(value) !== -1

}

/×*

* 格式化提示信息模板

*/

formatTpl(source, params) {

const that = this

if (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

}

/×*

* 判斷規(guī)則依賴是否存在

*/

depend(param) {

switch(typeof param) {

case &＃39;boolean&＃39;:

param = param

break

case &＃39;string&＃39;:

param = !!param.length

break

case &＃39;function&＃39;:

param = param()

default:

param = !0

}

return param

}

/×*

* 判斷輸入值是否為空

*/

optional(value) {

return !this.methods.required(value) && &＃39;dependency-mismatch&＃39;

}

/×*

* 獲取自定義字段的提示信息

* @param {String} param 字段名

* @param {Object} rule 規(guī)則

*/

customMessage(param, rule) {

const params = this.messages[param]

const isObject = typeof params === &＃39;object&＃39;

if (params && isObject) return params[rule.method]

}

/×*

* 獲取某個(gè)指定字段的提示信息

* @param {String} param 字段名

* @param {Object} rule 規(guī)則

*/

defaultMessage(param, rule) {

let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]

let type = typeof message

if (type === &＃39;undefined&＃39;) {

message = `Warning: No message defined for ${rule.method}.`

} else if (type === &＃39;function&＃39;) {

message = message.call(this, rule.parameters)

}

return message

}

/×*

* 緩存錯(cuò)誤信息

* @param {String} param 字段名

* @param {Object} rule 規(guī)則

* @param {String} value 元素的值

*/

formatTplAndAdd(param, rule, value) {

let msg = this.defaultMessage(param, rule)

this.errorList.push({

param: param,

msg: msg,

value: value,

})

}

/×*

* 驗(yàn)證某個(gè)指定字段的規(guī)則

* @param {String} param 字段名

* @param {Object} rules 規(guī)則

* @param {Object} event 表單數(shù)據(jù)對(duì)象

*/

checkParam(param, rules, event) {

// 緩存表單數(shù)據(jù)對(duì)象

this.scope = event

// 緩存字段對(duì)應(yīng)的值

const data = event.detail.value

const value = data[param] || &＃39;&＃39;

// 遍歷某個(gè)指定字段的所有規(guī)則，依次驗(yàn)證規(guī)則，否則緩存錯(cuò)誤信息

for(let method in rules) {

// 判斷驗(yàn)證方法是否存在

if (this.isValidMethod(method)) {

// 緩存規(guī)則的屬性及值

const rule = {

method: method,

parameters: rules[method]

}

// 調(diào)用驗(yàn)證方法

const result = this.methods[method](value, rule.parameters)

// 若result返回值為dependency-mismatch，則說明該字段的值為空或非必填字段

if (result === &＃39;dependency-mismatch&＃39;) {

continue

}

// 判斷是否通過驗(yàn)證，否則緩存錯(cuò)誤信息，跳出循環(huán)

if (!result) {

this.formatTplAndAdd(param, rule, value)

break

}

}

}

}

/×*

* 驗(yàn)證所有字段的規(guī)則，返回驗(yàn)證是否通過

* @param {Object} event 表單數(shù)據(jù)對(duì)象

*/

checkForm(event) {

this.errorList = []

for (let param in this.rules) {

this.checkParam(param, this.rules[param], event)

}

return this.valid()

}

/×*

* 返回驗(yàn)證是否通過

*/

valid() {

return this.size() === 0

}

/×*

* 返回錯(cuò)誤信息的個(gè)數(shù)

*/

size() {

return this.errorList.length

}

/×*

* 返回所有錯(cuò)誤信息

*/

validationErrors() {

return this.errorList

}

}

export default WxValidate

下面小編就給大家介紹一個(gè)小程序吧

嗨圖功能

1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來DIY。

4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。

想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開啟你的嗨圖之旅吧!