一、封装的目的
1.复用性
2.方便调用
二、分析：
1.微信小程序表单提交数据只会返回绑定name的value
2.配置：网上有很多表单的校验插件 但是大部分的配置都是在js 新增正则对象 ，我感觉不太简便，就构思了这个另类校验插件
三、原理：
很简单，就是将配置换个地方，将配置更换至HTML input中
四、实现：
1.配置规则：
<input name="name:user->require-error:用户名是必填项->email:true->error:用户名格式错误" placeholder="用户名" />
1.name:user //对应接口data的键
2.require-error:用户名是必填项 // 必填项提示 大部分插件不仅要配置 require:true 必填项 还要配置 require-error 必填项提示 我认为 只要配置了必填项提示 该input 框就是必填项
3.email:true //插件已配置的 常用正则验证 用户也可以在插件中配置自己常用的正则表达式 我这里还配置了 mobile （手机号）、phone（座机号）
4.regex:^\\w{6,16}$ //现在开发过程中页面也可能有不常用的正则 ，一直在源码中扩充回导致插件越来越大，也比较麻烦 ，为方便使用用户也可在页面中直接配置正则表达式
注意：在页面中配置 一定注意字符转义 这个问题坑了我10多分钟 在pc端没问题 在小程序 输入的值一直校验失败
5.error:用户名格式错误 //正则匹配错误提示
6.用->连接是因为正则中也有使用逗号等符号 所以选择-> ，如果在正则中有->在插件源码更换即可
2.页面：
HTML：
<form bindsubmit="formSubmit" bindreset="formReset" > <view class="section"> <view class="section__title"></view> <input name="name:user->require-error:用户名是必填项->email:true->error:用户名格式错误" placeholder="用户名" /> </view> <view class="section"> <view class="section__title"></view> <input name="name:password->require-error:密码是必填项->regex:^\\w{6,16}$->error:密码格式错误" placeholder="密码" /> </view> <view class="section"> <view class="section__title"></view> <input name="name:sex" placeholder="性别" /> </view> <view class="btn-area"> <button formType="submit">Submit</button> <button formType="reset">Reset</button> </view> </form>
JavaScript：
var checkout=require("../lib/checkout.js") Page({ formSubmit: function (e) { console.log(\'form发生了submit事件，携带数据为：\', e.detail.value) checkout.formCheckout(e.detail.value, function (global) { //调用校验插件 e.detail.value：form表单返回值 ，function (global)：校验 成功调用 console.log(global) //参数 wx.request({ //接口 url: \'\', }) }) }, formReset: function () { console.log(\'form发生了reset事件\') }, })
3.插件 ：
function formCheckout(global, factory){ var val = global, arr = [], data = {}; var _RULES_={ require:function(_value_){//必填项 return _value_["value"] != null && _value_["value"] != undefined && _value_["value"] != "" }, "email": function (_value_) {//邮箱 return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(_value_["value"]) }, "mobile": function (_value_) {//手机号码 return /^1(3|4|5|7|8)\d{9}$/.test(_value_["value"]) }, "phone": function (_value_) {//座机 return /^0\d{2,3}-?\d{7,8}$/.test(_value_["value"]) }, "regex": function (_value_) {//正则表达式格式 var regex = new RegExp(_value_["regex"]) return regex.test(_value_["value"]) } } for (var i in val) { console.log("i:" + i, "val:" + val[i]) var _magArr_ = i.split("->") var _arr_ = new Object; _arr_.value = val[i]; for (var j in _magArr_) { var config = _magArr_[j].split(":") _arr_[config[0]] = config[1] } console.log(_arr_) for (var k in _RULES_){ console.log(_RULES_[k](_arr_), k == "require") if (_arr_["require-error"] && k =="require" &&!_RULES_[k](_arr_)) { showToast(_arr_["require-error"]) return } if (_arr_[k] && !_RULES_[k](_arr_)){ showToast(_arr_["error"]) return } data[_arr_["name"]] = _arr_["value"]; } } function showToast(title){ wx.showToast({ title: title, icon: \'none\', duration: 2000, mask:true }) } factory(data) } module.exports = { formCheckout,//校验 }
请发表评论