微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)
2018-08-30 10:02
483 查看
弹出的形式对于用户来说,总是不太友好的
可能会出现层级问题(只需要设置一下提示的层级即可)
WxValidate内置规则
以下代码拷贝即可使用~
wxml
<form bindsubmit='submitCheckInfo'> <!-- 提示警告! --> <view class='wran-tips' style='{{displayWarn}}'> <text>{{warnInfo}}</text> </view> <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="phoneInput" 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>
js
import WxValidate from '../../../utils/WxValidate'; Page({ /** * 页面的初始数据 */ data: { // 初始化警告 displayWarn: 'display:none' }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { // 校验规则 -rules this.initValidate(); }, /** * 表单验证->(可自定义验证形式) */ showWarnInfo(error) { // 当前page是this对象 let page = this; // 延时时间等待 let delayTime = 1; // 延时等待毫秒,现设置为1000 let delayMillsecond = 1000; // 调用显示警告函数 showWran(page, error, delayTime, delayMillsecond); }, /** * 表单-提交前的(校验) */ submitCheckInfo(e) { const params = e.detail.value console.log(params) // 传入表单数据,调用验证方法 if (!this.WxValidate.checkForm(params)) { const error = this.WxValidate.errorList[0] this.showWarnInfo(error) return false } // 验证通过以后 this.submitForm(params); }, /** * 表单-提交(到后端) */ submitForm(params) { console.log(params); wx.showToast({ title: '提交吧~Q!', }) }, /** * 表单-验证字段 */ initValidate() { const rules = { name: { required: true, rangelength: [2, 4] }, idcard: { required: true, idcard: true, }, tel: { required: true, tel: true, }, 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) }, '请勾选 《顺风男服务协议》') } }) /** * 可加入工具集-减少代码量 */ function showWran(page, error, delayTime, delayMillsecond) { let timesRun = 0; let interval = setInterval(function() { timesRun += delayTime; if (timesRun === delayTime) { clearInterval(interval); } page.setData({ warnInfo: error.msg, displayWarn: 'display:none' }); }, delayMillsecond); page.setData({ warnInfo: error.msg, displayWarn: 'display:block' }); }
wxss
@import "../../template/up-pic.wxss"; page { font-size: 30rpx; } button:active { opacity: 0.7; } .wran-tips { text-align: center; color: #fff; padding: 2%; width: 100%; background-color: #f00; display: flex; justify-content: center; position: fixed; top: 0; } .container-info { padding: 5%; /* margin-top: 4%; */ } .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: 50%; */ width: 100%; } .code { position: relative; width: 100%; } .code button { position: absolute; top: 72rpx; right: 0; } input:hover { border-bottom: 2px solid #ddd; } .self-idcard-info { margin-top: 15%; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; border: 1px dashed #ddd; padding: 2%; } .f-center { display: flex; justify-content: center; width: 100%; } .picture_list { /* justify-content: center; */ 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使用)
- jQuery表单验证插件Validation中两种自定义验证信息的方法
- 微信小程序表单登录并获取个人信息的实现
- jQuery Validate表单验证插件 添加class属性形式的校验
- jQuery Validate表单验证插件 添加class属性形式的校验
- 自定义Struts2表单验证后的错误信息返回到网页的显示格式/样式
- 微信小程序表单验证及页面之间参数传递
- 自定义Struts2表单验证后的错误信息显示格式
- 如何自定义Struts2表单验证后的错误信息显示格式 .
- jQuery标签式表单验证提示(警告)信息
- 如何自定义Struts2表单验证后的错误信息显示格式/样式
- 如何自定义Struts2表单验证后的错误信息显示格式/样式
- 微信小程序~表单提交、验证
- 如何自定义Struts2表单验证后的错误信息显示格式/样式
- 微信小程序开发--表单验证
- 小程序使用表单验证(使用WxValidate)记录
- 微信小程序表单验证错误提示
- jquery插件-表单验证插件-提示信息中文化与定制提示信息
- java 微信小程序登录 验证登录并获取用户信息
- 如何自定义Struts2表单验证后的错误信息显示格式/样式