登录  /  注册

小程序的开发:表单的验证(代码)

不言
发布: 2018-08-10 15:55:33
原创
2952人浏览过

本篇文章给大家带来的内容是关于小程序的开发:表单的验证(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1. school.wxml:

<form bindsubmit=&#39;formSubmit&#39;><view class="subInfo">
  <view class="subInfoItem clearfix">
    <text class="tag need">校区名称</text>
    <input name=&#39;name&#39; value=&#39;&#39; placeholder=&#39;请输入校区名称&#39; placeholder-class=&#39;placeholder&#39;></input>
  </view>
  <view class="subInfoItem clearfix">
    <text class="tag">联系电话</text>
    <input name=&#39;contactphone&#39; value=&#39;&#39; placeholder=&#39;请输入联系电话&#39; placeholder-class=&#39;placeholder&#39;></input>
  </view></view><view class=&#39;btnWrap&#39;>
  <button class=&#39;saveBtn&#39; form-type=&#39;submit&#39;>保存</button></view></form>
登录后复制

2.school.js:

import WxValidate from &#39;../utils/classes/WxValidate.js&#39;var validate;

Page({    // 初始化表单校验
    initValidate(){        // 创建实例对象
        this.validate = new WxValidate({
            name: {
                required: true,
                maxlength: 20
            },
            contactphone: {
                tel: true
            }
        }, {
                name: {
                    required: &#39;请输入校区名称!&#39;,
                    maxlength: &#39;名称不得超过20字!&#39;
                },
                contactphone: {
                    tel: &#39;电话格式不正确!&#39;
                }
            })
    },
    data: {

    },
    onLoad: function (options) {
        this.initValidate()
    },
    formSubmit(e){        // 校验表单
        if (!this.validate.checkForm(e.detail.value)){            
        const error = this.validate.errorList[0];
            wx.showToast({
                title: `${error.msg} `,
                icon: &#39;none&#39;
            })            
            return false
        }        // 保存操作...
    }
})
登录后复制

注:

WxValidate - 表单验证

插件介绍

该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。

参数说明

参数类型描述
rulesobject验证字段的规则
messagesobject验证字段的提示信息

内置校验规则

序号规则描述
1required: true这是必填字段。
2email: true请输入有效的电子邮件地址。
3tel: true请输入11位的手机号码。
4url: true请输入有效的网址。
5date: true请输入有效的日期。
6dateISO: true请输入有效的日期(ISO),例如:2009-06-23,1998/01/22。
7number: true请输入有效的数字。
8digits: true只能输入数字。
9idcard: true请输入18位的有效身份证。
10equalTo: &#39;field&#39;输入值必须和 field 相同。
11contains: &#39;ABC&#39;输入值必须包含 ABC。
12minlength: 5最少要输入 5 个字符。
13maxlength: 10最多可以输入 10 个字符。
14rangelength: [5, 10]请输入长度在 5 到 10 之间的字符。
15min: 5请输入不小于 5 的数值。
16max: 10请输入不大于 10 的数值。
17range: [5, 10]请输入范围在 5 到 10 之间的数值。

常用实例方法

名称返回类型描述
checkForm(e)boolean验证所有字段的规则,返回验证是否通过。
valid()boolean返回验证是否通过。
size()number返回错误信息的个数。
validationErrors()array返回所有错误信息。
addMethod(name, method, message)boolean添加自定义验证方法。

addMethod(name, method, message) - 添加自定义校验

第一个参数 name 是添加的方法的名字。 第二个参数 method 是一个函数,接收三个参数 (value, param) ,value 是元素的值,param 是参数。 第三个参数 message 是自定义的错误提示。

使用说明

// 验证字段的规则const rules = {
    email: {
        required: true,
        email: true,
    },
    tel: {
        required: true,
        tel: true,
    },
    idcard: {
        required: true,
        idcard: true,
    },
}// 验证字段的提示信息,若不传则调用默认的信息const messages = {
    email: {
        required: &#39;请输入邮箱&#39;,
        email: &#39;请输入正确的邮箱&#39;,
    },
    tel: {
        required: &#39;请输入手机号&#39;,
        tel: &#39;请输入正确的手机号&#39;,
    },
    idcard: {
        required: &#39;请输入身份证号码&#39;,
        idcard: &#39;请输入正确的身份证号码&#39;,
    },
}
// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)
// 自定义验证规则
this.WxValidate.addMethod(&#39;assistance&#39;, (value, param) => {    
return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
}, &#39;请勾选1-2个敲码助手&#39;)// 如果有个表单字段的 assistance,则在 rules 中写assistance: {
    required: true,
    assistance: true,
},// 调用验证方法,传入参数 e 是 form 表单组件中的数据submitForm(e) {    
const params = e.detail.value

    console.log(params)    // 传入表单数据,调用验证方法
    if (!this.WxValidate.checkForm(e)) {        
    const error = this.WxValidate.errorList[0]        
    return false
    }
},
登录后复制

相关推荐:

小程序:实现点击倒计时的代码

小程序组件:聊天会话组件的介绍(附代码)

小程序与后台进行交互的实现(附代码)

以上就是小程序的开发:表单的验证(代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号