we validator Unduh - we validator Unduh kode sumber

we validator

Kode Sumber AI

v2.1.17

Unduh

kami-validator

Terdapat perbedaan antara versi 2.x dan 1.x. Jika Anda tetap menggunakan versi lama, Anda dapat memeriksa versi 1.x. Jika ingin mengupgrade ke 2.x, harap membaca panduan upgrade terlebih dahulu. Disarankan menggunakan versi 2.x.

Plug-in validasi formulir sederhana dan fleksibel yang mendukung program mini, browser, dan Nodejs. Program mini mendukung: WeChat, Alipay, Baidu Smart, ByteDance, dan program mini meminta untuk menggunakan showToast secara default.

Dokumentasi API |. Contoh, jika Anda? Cukup klik ★Bintang .

Fitur

Sederhana dan fleksibel untuk digunakan, tidak bergantung pada kerangka apa pun
Ini mendukung metode program mini asli dan penggunaan kerangka program mini seperti mpvue, wepy, dan taro.
Mendukung penggunaan sisi browser dan Nodejs
Mendukung aturan khusus
Mendukung permintaan pesan kesalahan khusus
Mendukung penambahan atau penghapusan verifikasi lapangan secara dinamis
Mendukung verifikasi independen terhadap satu atau lebih aturan lapangan
Verifikasi fungsi dukungan
Mendukung verifikasi simultan beberapa bidang dan menampilkan kesalahan
Mendukung aturan verifikasi umum secara default

Memasang

Gunakan npm:

npm install we-validator --save

Gunakan cdn:

 < script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script >

menggunakan

Berikut ini adalah penggunaan program mini WeChat, program mini lainnya serupa

Klik untuk melihat chestnut?

 < form bindsubmit =" onSubmitForm " >
    < input type =" text " name =" username " placeholder ="用户名" />
    < input type =" number " name =" phoneno " placeholder ="手机号" />
    < input type =" text " name =" str " placeholder ="长度为3的字符串" />

    < button type =" default " formType =" submit " >提交</ button >
</ form >

 const WeValidator = require ( 'we-validator' )

Page ( {
    onReady ( ) {
        this . initValidator ( )
    } ,
    onSubmitForm ( e ) {
        let { value } = e . detail

        if ( ! this . validatorInstance . checkData ( value ) ) return

        // 开始提交表单
        // wx.request
    } ,
    initValidator ( ) {
        // 实例化
        this . validatorInstance = new WeValidator ( {
            rules : {
                username : {
                    required : true
                } ,
                phoneno : {
                    required : true ,
                    mobile : true
                } ,
                str : {
                    length : 3
                } ,
            } ,
            messages : {
                username : {
                    required : '请输入用户名'
                } ,
                phoneno : {
                    required : '请输入手机号' ,
                    mobile : '手机号格式不正确'
                } ,
                str : { // 非必填字段
                    length : '请输入长度为3的字符串'
                } ,
            } ,
        } )
    } ,
} )

Contoh

Anda juga dapat merujuk ke contoh terkait pada proyek saat ini

Cara menggunakan program mini WeChat asli
Cara menggunakan mpvue
Cara menggunakan peramban web
Cara menggunakan sisi Nodejs
Kasus verifikasi yang rumit - aturan khusus - menambahkan verifikasi lapangan secara dinamis

API

WeValidator baru (opsi)
- .checkData(data, onMessage) memverifikasi data dan menampilkan pesan kesalahan
- .checkFields(data, field, onMessage) Memverifikasi data, pesan kesalahan akan ditampilkan, dan hanya kolom terkait yang diverifikasi
- .isValid(data, field) memverifikasi data, tidak ada pesan kesalahan yang ditampilkan, dan kolom tertentu dapat diverifikasi satu per satu
- .addRules(options) Tambahkan verifikasi bidang secara dinamis
- .removeRules(fields) secara dinamis menghapus validasi bidang

API Statis

KamiValidator
- .addRule(ruleName, ruleOption) Tambahkan aturan khusus
- .checkValue(ruleName, value, param) fungsi verifikasi, verifikasi konten tertentu satu per satu
- .onMessage menyetel tampilan pesan kesalahan global

Aturan yang didukung default

Catatan: Aturan yang dikonfigurasi akan diverifikasi hanya jika bidang yang tidak wajib diisi memiliki nilai.

aturan	menggambarkan	Perintah bawaan
`required: true`	Diperlukan	Bidang ini wajib diisi
`pattern: /^d+$/`	Jenderal biasa	Tidak cocok dengan aturan validasi ini
`email: true`	Format email	Silakan masukkan alamat email yang valid
`mobile: true`	Nomor ponsel 11 digit	Silakan masukkan 11 digit nomor ponsel Anda
`tel: true`	Nomor telepon rumah misalnya: 010-1234567, 0551-1234567	Silakan masukkan nomor telepon rumah Anda
`url: true`	URL	Silakan masukkan URL yang valid
`idcard: true`	nomor identitas	Silakan masukkan 18 digit kartu identitas yang valid
`equalTo: 'field'`	Verifikasi nilai bidang, misalnya: kata sandi dan konfirmasi kata sandi, lihat	Nilai yang dimasukkan harus sama dengan `field` field
`notEqualTo: 'field'`	Nilai bidang tidak boleh sama. Verifikasi adalah kebalikan dari `equalTo`	Nilai input tidak boleh sama dengan `field`
`contains: 'str'`	Entah itu mengandung karakter tertentu	Nilai masukan harus mengandung `str`
`notContains: 'str'`	tidak boleh berisi karakter tertentu	Nilai input tidak boleh berisi `str`
`length: 5`	Panjang talinya	Silakan masukkan `5` karakter
`minlength: 2`	Panjang minimum string	Setidaknya diperlukan `2` karakter
`maxlength: 6`	Panjang tali maksimum	Anda dapat memasukkan hingga `6` karakter
`rangelength: [2, 6]`	rangkaian dengan rentang panjang tertentu	Silakan masukkan panjang antara `2` dan `6` karakter
`number: true`	nomor	Silakan masukkan nomor yang valid
`digits: true`	bilangan bulat positif	Hanya bilangan bulat positif yang dapat dimasukkan
`integer: true`	Bilangan bulat positif atau negatif	Hanya bilangan bulat yang dapat dimasukkan
`min: 3`	Angka yang lebih besar dari angka tertentu (angka minimum dibatasi), Anda juga dapat membandingkan nilai bidang, lihat	Silakan masukkan angka yang lebih besar dari `3`
`max: 9`	Angka yang kurang dari angka tertentu (angka maksimum hanya boleh angka tertentu), Anda juga dapat membandingkan nilai bidang	Silakan masukkan angka kurang dari `9`
`range: [3, 9]`	Angka yang lebih besar dari dan kurang dari	Silakan masukkan angka yang lebih besar dari `3` dan kurang dari `9`
`chinese: true`	karakter Cina	Hanya karakter Cina yang dapat dimasukkan
`minChinese: 3`	Jumlah minimum karakter Cina	Masukkan minimal `3` karakter Cina
`maxChinese: 9`	Jumlah maksimum karakter Cina	Masukkan hingga `9` karakter Cina
`rangeChinese: [3, 9]`	Berapa banyak karakter Cina yang lebih besar dari dan kurang dari	Hanya `3` hingga `9` karakter Cina yang dapat dimasukkan
`date: true`	Tanggal ( `new Date(value)` digunakan untuk verifikasi secara default)	Silakan masukkan tanggal yang valid
`dateISO: true`	Tanggal (format standar ISO) Misalnya: 19-09-2019, 19/09/2019	Silakan masukkan tanggal yang valid (format standar ISO)
`ipv4: true`	alamat ipv4	Silakan masukkan alamat IPv4 yang valid
`ipv6: true`	alamat ipv6	Silakan masukkan alamat IPv6 yang valid

WeValidator baru (opsi)

Memberi contoh

Pengembalian : object - validatorInstance

parameter	jenis	nilai bawaan	menggambarkan
pilihan	`object`
[pilihan.aturan]	`object`		Aturan untuk memvalidasi bidang
[pilihan.pesan]	`object`		Pesan kesalahan bidang validasi
[options.onMessage]	`function`		Mode tampilan pesan kesalahan secara otomatis mendeteksi lingkungan secara default. Program mini menggunakan `showToast` secara default Browser web biasa menggunakan `alert` secara default Sisi Nodejs tidak melakukan pemrosesan, disarankan untuk mengkonfigurasinya sendiri, detailnya
[options.multiCheck]	`boolean`	`false`	Apakah akan memverifikasi beberapa bidang digunakan ketika beberapa bidang perlu diverifikasi sekaligus dan pesan kesalahan ditampilkan

Klik untuk melihat chestnut?

 const WeValidator = require ( 'we-validator' )

new WeValidator ( {
    rules : {
        username : {
            required : true
        } ,
        phoneno : {
            required : true ,
            mobile : true
        }
    } ,
    messages : {
        username : {
            required : '请输入用户名'
        } ,
        phoneno : {
            required : '请输入手机号' ,
            mobile : '手机号格式不正确'
        }
    }
} )

.checkData(data, diMessage)

Verifikasi data, pesan kesalahan akan ditampilkan, dan semua aturan lapangan akan diverifikasi

Kembali : boolean

parameter	jenis	nilai bawaan	menggambarkan
data	`object`		Formulir data yang perlu diverifikasi
di Pesan	`function`		Prompt pesan kesalahan khusus, detailnya

.checkFields(data, kolom, onMessage)

Saat memverifikasi data, pesan kesalahan akan ditampilkan. Hanya bidang terkait yang akan diverifikasi, sebagai referensi.

Biasanya digunakan untuk memverifikasi satu atau lebih aturan lapangan satu per satu

Kembali : boolean

parameter	jenis	menggambarkan
data	`object`	Formulir data yang perlu diverifikasi
bidang	`array`	Aturan bidang verifikasi, wajib diisi. `['phoneNo']` hanya memeriksa semua aturan untuk bidang ini `['phoneNo:required']` Hanya memeriksa aturan `required` bidang ini `['phoneNo:required,mobile']` hanya memeriksa aturan `required` dan `mobile` pada bidang ini `['phoneNo', 'code']` hanya memeriksa semua aturan dari dua bidang ini
di Pesan	`function`	Prompt pesan kesalahan khusus, detailnya

.isValid(data, bidang)

Verifikasi apakah datanya valid dan tidak ada pesan kesalahan yang muncul

Skenario penggunaan, misalnya: skenario di mana bidang tertentu dalam formulir diverifikasi dan hanya dapat diklik setelah tombol diklik, untuk referensi.

Kembali : boolean

parameter	jenis	nilai bawaan	menggambarkan
data	`object`		Formulir data yang perlu diverifikasi
bidang	`array`		Bidang yang akan diperiksa tidak diteruskan. Secara default, semua aturan bidang dicentang. Jika ada, hanya aturan bidang terkait yang `.checkFields(data, fields)` .

.addRules(pilihan)

Tambahkan verifikasi lapangan secara dinamis, referensi

parameter	jenis	nilai bawaan	menggambarkan
pilihan	`object`		Sama seperti `new WeValidator(options)` , detailnya

Klik untuk melihat chestnut?

 const WeValidator = require ( 'we-validator' )

const validatorInstance = new WeValidator ( {
    rules : {
        username : {
            required : true
        }
    } ,
    messages : {
        username : {
            required : '请输入用户名'
        }
    }
} )

// 动态添加校验
validatorInstance . addRules ( {
    rules : {
        phoneno : {
            required : true ,
            mobile : true
        }
    } ,
    messages : {
        phoneno : {
            required : '请输入手机号' ,
            mobile : '手机号格式不正确'
        }
    }
} )

.removeRules(bidang)

Hapus validasi bidang, referensi secara dinamis

parameter	jenis	nilai bawaan	menggambarkan
bidang	`array`		Bidang formulir yang perlu dihapus dari validasi

 validatorInstance . removeRules ( [ 'username' ] )

WeValidator.addRule(Nama Aturan, Opsi Aturan)

Metode statis: tambahkan aturan khusus, lihat

parameter	jenis	menggambarkan
nama aturan	`string`	Nama aturan
opsi aturan	`object`	Konfigurasi aturan
[ruleOption.pesan]	`string`	Teks pesan kesalahan default dapat dimasukkan secara dinamis ke dalam parameter, misalnya,`请输入长度在{0} 到{1} 之间的字符`, lihat
[ruleOption.rule]	`function\|regexp`	Fungsi verifikasi aturan perlu mengembalikan `boolean` . Anda juga dapat menulis ekspresi reguler secara langsung (jika hanya verifikasi tipe biasa).

Klik untuk melihat chestnut?

 const WeValidator = require ( 'we-validator' )

// 添加自定义规则（这两种写法一样）
WeValidator . addRule ( 'theRuleName' , {
  message : '默认错误信息文字' ,
  rule ( value , param ) {
    return / d / . test ( value )
  }
} )
WeValidator . addRule ( 'theRuleName' , {
  message : '默认错误信息文字' ,
  rule : / d /
} )

// 使用方式一，实例化
new WeValidator ( {
    rules : {
        field1 : {
            theRuleName : true
        }
    } ,
    messages : {
        field1 : {
            theRuleName : '提示信息'
        }
    }
} )

// 使用方式二，调用函数
WeValidator . checkValue ( 'theRuleName' , 'str' )

WeValidator.checkValue(nama aturan, nilai, param)

Metode statis: verifikasi fungsi

parameter	jenis	menggambarkan
nama aturan	`string`	Nama aturan
nilai	`string`	Apa yang perlu diverifikasi
param	`any`	Diteruskan ke parameter aturan

Mendukung semua aturan default yang didukung dan juga mendukung aturan khusus.

 // 必填
let b1 = WeValidator . checkValue ( 'required' , 'str' ) // true

// 不能小于6的数字
let b2 = WeValidator . checkValue ( 'min' , 'str' , 6 ) // false

// 大于2小于5的数字
let b3 = WeValidator . checkValue ( 'range' , 'str' , [ 2 , 5 ] ) // false

WeValidator.onMessage

Prompt pesan kesalahan khusus

Anda dapat mengonfigurasinya secara global atau individual, yang sangat fleksibel.

Prioritasnya adalah: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Deteksi default

Metode prompt pesan default: Program mini menggunakan showToast secara default, browser menggunakan alert secara default, dan tidak ada pemrosesan di sisi Nodejs.

Klik untuk melihat chestnut?

 const WeValidator = require ( 'we-validator' )

// 1、全局配置
WeValidator . onMessage = function ( data ) {
    /*
    data 参数
    {
        msg, // 提示文字
        name, // 表单控件的 name
        value, // 表单控件的值
        param // rules 验证字段传递的参数
    }
    */
}

// 2、实例化配置
new WeValidator ( {
    rules : { } ,
    message : { } ,
    onMessage : function ( data ) {
        alert ( data . msg )
    }
} )

// 3、验证的时候配置 onMessage（nodejs端校验可以使用此方式）
if ( ! obj . checkData ( formData , onMessage ) ) return

function onMessage ( data ) {
  alert ( data . msg )
}

Verifikasi beberapa bidang secara bersamaan dan tampilkan kesalahan

Skenario penggunaannya adalah sebagai berikut, catatan: ketika multiCheck true , disarankan untuk menggunakan onMessage khusus , lihat

kami-validator

Klik untuk melihat chestnut?

 var validatorInstance = new WeValidator ( {
  multiCheck : true ,
  onMessage : function ( data ) {
    console . log ( data ) ;
    
    // 根据自己的项目去处理，控制错误信息的显示
  } ,
  rules : {
      username : {
          required : true
      } ,
      phoneno : {
          required : true ,
          mobile : true
      }
  } ,
  messages : {
      username : {
          required : '请输入用户名'
      } ,
      phoneno : {
          required : '请输入手机号' ,
          mobile : '手机号格式不正确'
      }
  }
} ) ;