微信小程序 - 表单验证插件WxValidate使用
2018-08-29 20:48
585 查看
Github地址:WxValidate
1. 拷贝至util目录
2.项目引入
3.查看wxml匹配规则,通过name
4.在js配置规则
import WxValidate from '../../../utils/WxValidate'; Page({ /** * 页面的初始数据 */ data: {}, onLoad: function(options) { /** * 4-1(先初始化表单) */ this.initValidate(); }, showModal(error) { wx.showModal({ content: error.msg, showCancel: false, }) }, submitForm(e) { /** * 4-3(表单提交校验) */ const params = e.detail.value if (!this.WxValidate.checkForm(params)) { const error = this.WxValidate.errorList[0] this.showModal(error) return false } /** * 这里添写验证成功以后的逻辑 * */ //验证通过以后-> this.submitInfo(params); }, /** * 表单-提交 */ submitInfo(params) { // form提交 let form = params; console.log('将要提交的表单信息:', form); wx.showToast({ title: '提交成功!!!!', }) }, /** * 表单-验证字段 */ initValidate() { /** * 4-2(配置规则) */ const rules = { name: { required: true, rangelength: [2, 4] }, idcard: { required: true, idcard: true, }, tel: { required: true, tel: true, }, // 配置false可关闭验证 regcode: { required: false, minlength: 6 }, assistance: { required: true, assistance: true, }, } // 验证字段的提示信息,若不传则调用默认的信息 const messages = { name: { required: '请输入姓名', rangelength: '请输入2~4个汉字个汉字' }, tel: { required: '请输入11位手机号码', tel: '请输入正确的手机号码', }, idcard: { required: '请输入身份证号码', idcard: '请输入正确的身份证号码', }, regcode: { required: '请输入验证码', minlength: '请输入正确的验证码' }, assistance: { required: '请勾选 《顺风男服务协议》' }, } // 创建实例对象 this.WxValidate = new WxValidate(rules, messages) /** * 也可以自定义验证规则 */ this.WxValidate.addMethod('assistance', (value, param) => { return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2) }, '请勾选 《顺风男服务协议》') } });
5.wxml
<form bindsubmit='submitForm'> <view class="container"> <view class='container-info'> <view class="man-form-info"> <view class='name'>姓名 <input placeholder='请输入姓名' name="name"></input> </view> <view class='idcard'> 身份证号码 <input maxlength='18' placeholder='请输入身份证号码' type='idcard' name="idcard"></input> </view> <view class='phone'> 手机号码 <input maxlength='11' placeholder='请输入手机号码' type='number' bindinput="phoneValue" name="tel"></input> </view> </view> </view> <view class='read-man-pact'> <checkbox-group name="assistance"> <checkbox></checkbox> <navigator class='pact'>阅读《顺风男服务协议》</navigator> </checkbox-group> </view> <view class='submit-form-info'> <button form-type='submit'>提交</button> </view> </view> </form>
wxss
page { font-size: 30rpx; } input:hover { border-bottom: 2px solid #ddd; } button:active { opacity: 0.7; } .container-info { padding: 5%; } .man-form-info { display: flex; flex-wrap: wrap; justify-content: center; } .man-form-info .name, .man-form-info .idcard, .man-form-info .phone, .man-form-info .regcode { display: flex; width: 100%; flex-wrap: wrap; margin-top: 2%; } .man-form-info input { width: 100%; border-bottom: 1px solid #ddd; } .regcode { position: relative; } .regcode button { border-radius: 10rpx; background-color: #3879d9; color: #fff; height: 54rpx; line-height: 54rpx; font-size: 23rpx; width: 300rpx; margin-top: -2%; } .regcode input { width: 100%; } .code { position: relative; width: 100%; } .code button { position: absolute; top: 72rpx; right: 0; } .self-idcard-info { margin-top: 15%; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; border: 1px dashed #ddd; padding: 2%; } .f-center { width: 100%; display: flex; justify-content: center; } .picture_list { padding: 0 7%; } .add-image { background-color: #ddd; color: #fff; } .upload_progress { width: 167rpx; height: 164rpx; } .apply { width: 96%; display: flex; justify-content: space-between; align-items: center; padding: 2%; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } .apply-deposit { font-weight: bold; } .apply-deposit-amount { font-weight: bold; color: #fdd20c; } .apply button { margin: 0; padding: 0; width: 240rpx; height: 60rpx; line-height: 60rpx; color: #fff; background-color: #fdd20c; } .read-man-pact { display: flex; justify-content: center; padding: 2%; } .read-man-pact checkbox-group { display: flex; align-items: center; } .pact { border-bottom: 1px solid #ddd; } .submit-form-info { display: flex; justify-content: center; } .submit-form-info button { background-color: #fdd000; width: 80%; margin: 3% 0; }
效果图(拷贝上面的代码即可运行)
相关文章推荐
- 微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)
- 微信小程序开发之表单验证(WxValidate使用)
- 小程序使用表单验证(使用WxValidate)记录
- jquery表单验证插件的使用
- jQuery 表单验证插件 jQuery Validation Engine 使用
- jquery表单验证使用插件formValidator
- jQuery formValidator表单验证插件使用总结
- form 表单jquery验证插件使用
- jQuery表单验证插件 - 使用方式非常简单,明了
- jquery表单验证插件与使用方法
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
- jQuery validate表单验证插件使用方法
- Validation-jQuery表单验证插件使用方法
- jQuery 表单验证插件 jQuery Validation Engine 使用
- jquery表单验证插件jquery.validate的使用
- jquery表单验证插件——使用方式非常简单,明了
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- 原创基于标签的表单验证插件,有源码,有注释,有实例,使用超级方便。
- jQuery 表单验证插件 jQuery Validation Engine 使用
- jquery 表单验证插件validation(国际化)的使用