### [小程序的开发：表单的验证(代码)](https://www.prosaas.cn/article/17161)

**Published:** 2018-08-10T07:55:33

**Author:** 5201314

**Excerpt:** 本篇文章给大家带来的内容是关于小程序的开发：表单的验证(代码)，有一定的参考价值，有需要的朋友可以参考一下，希…

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

### 1\. school.wxml:

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

### 2.school.js:

import WxValidate from '../utils/classes/WxValidate.js'var validate;

Page({    // 初始化表单校验
    initValidate(){        // 创建实例对象
        this.validate = new WxValidate({
            name: {
                required: true,
                maxlength: 20
            },
            contactphone: {
                tel: true
            }
        }, {
                name: {
                    required: '请输入校区名称!',
                    maxlength: '名称不得超过20字!'
                },
                contactphone: {
                    tel: '电话格式不正确!'
                }
            })
    },
    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: 'none'
            })            
            return false
        }        // 保存操作...
    }
})

注:

WxValidate - 表单验证

插件介绍

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

参数说明

| 参数  | 类型  | 描述  |
| --- | --- | --- |
| rules | `object` | 验证字段的规则 |
| messages | `object` | 验证字段的提示信息 |

内置校验规则

| 序号  | 规则  | 描述  |
| --- | --- | --- |
| 1   | `required: true` | 这是必填字段。 |
| 2   | `email: true` | 请输入有效的电子邮件地址。 |
| 3   | `tel: true` | 请输入11位的手机号码。 |
| 4   | `url: true` | 请输入有效的网址。 |
| 5   | `date: true` | 请输入有效的日期。 |
| 6   | `dateISO: true` | 请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。 |
| 7   | `number: true` | 请输入有效的数字。 |
| 8   | `digits: true` | 只能输入数字。 |
| 9   | `idcard: true` | 请输入18位的有效身份证。 |
| 10  | `equalTo: 'field'` | 输入值必须和 field 相同。 |
| 11  | `contains: 'ABC'` | 输入值必须包含 ABC。 |
| 12  | `minlength: 5` | 最少要输入 5 个字符。 |
| 13  | `maxlength: 10` | 最多可以输入 10 个字符。 |
| 14  | `rangelength: [5, 10]` | 请输入长度在 5 到 10 之间的字符。 |
| 15  | `min: 5` | 请输入不小于 5 的数值。 |
| 16  | `max: 10` | 请输入不大于 10 的数值。 |
| 17  | `range: [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: '请输入邮箱',
        email: '请输入正确的邮箱',
    },
    tel: {
        required: '请输入手机号',
        tel: '请输入正确的手机号',
    },
    idcard: {
        required: '请输入身份证号码',
        idcard: '请输入正确的身份证号码',
    },
}
// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)
// 自定义验证规则
this.WxValidate.addMethod('assistance', (value, param) => {    
return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
}, '请勾选1-2个敲码助手')// 如果有个表单字段的 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
    }
},

相关推荐：

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

小程序组件：聊天会话组件的介绍（附代码）

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

以上就是小程序的开发：表单的验证(代码)的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** Array, Boolean, jquery, JS, number, 封装, 表单验证

**Categories:** 后端开发

---