小規模プログラムの開発: フォーム検証 (コード)-ミニプログラム開発-php.cn

小規模プログラムの開発: フォーム検証 (コード)

不言

リリース： 2018-08-10 15:55:33

オリジナル

3113 人が閲覧しました

この記事の内容は、小さなプログラムの開発に関するものです: フォーム検証 (コード) なので、必要な友人が参考になれば幸いです。

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 を参照してパッケージ化されており、以下を提供しますミニプログラムフォーム携帯電話番号、電子メール検証など、一般的に使用される検証ルールのセット。また、フォーム検証を容易にするカスタム検証方法を追加する機能も提供します。

パラメータの説明

パラメータ	タイプ	説明
rules	`objectobject`	验证字段的规则
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`

<コード>オブジェクト

検証フィールドのプロンプト情報

組み込み検証ルール

シリアル番号

ルール説明

🎜1🎜 🎜必須: true code >🎜🎜これは必須フィールドです。 🎜🎜🎜🎜2🎜🎜email: true🎜🎜有効なメールアドレスを入力してください。 🎜🎜🎜🎜3🎜🎜tel: true🎜🎜11桁の携帯電話番号を入力してください。 🎜🎜🎜🎜4🎜🎜url: true🎜🎜有効な URL を入力してください。 🎜🎜🎜🎜5🎜🎜date: true🎜🎜有効な日付を入力してください。 🎜🎜🎜🎜6🎜🎜dateISO: true🎜🎜有効な日付 (ISO) を入力してください (例: 2009-06-23、1998/01/22)。 🎜🎜🎜🎜7🎜🎜number: true🎜🎜有効な番号を入力してください。 🎜🎜🎜🎜8🎜🎜数字: true🎜🎜数字のみを入力できます。 🎜🎜🎜🎜9🎜🎜idcard: true🎜🎜 18 桁の有効な ID カードを入力してください。 🎜🎜🎜🎜10🎜🎜equalTo: 'field'🎜🎜 入力値はフィールドと同じである必要があります。 🎜🎜🎜🎜11🎜🎜contains: 'ABC'🎜🎜 入力値には ABC が含まれている必要があります。 🎜🎜🎜🎜12🎜🎜minlength: 5🎜🎜少なくとも 5 文字が必要です。 🎜🎜🎜🎜13🎜🎜maxlength: 10🎜🎜最大10文字まで入力できます。 🎜🎜🎜🎜14🎜🎜rangelength: [5, 10]🎜🎜5〜10の文字長を入力してください。 🎜🎜🎜🎜15🎜🎜min: 5🎜🎜5以上の値を入力してください。 🎜🎜🎜🎜16🎜🎜最大: 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) - カスタム検証を追加します🎜🎜 最初のパラメーター名は、追加されたメソッドの名前です。 2 番目のパラメーターメソッドは、3 つのパラメーター (value、param) を受け取る関数です。value は要素の値、param はパラメーターです。 3 番目のパラメーターメッセージはカスタムエラーメッセージです。 🎜🎜使用説明書🎜🎜🎜

// 验证字段的规则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 中国語 Web サイトの他の関連記事を参照してください。