async-validator-uniapp
Advanced tools
a simgle tool for valid form github
###安装
npm init -y
npm i async-validator-uniapp --save
import package from 'async-validator-uniapp'
import xPlus from "async-validator-uniapp"
xPlus.install(Vue);
- 第一个参数是Vue
- 第二个参数是你要给你的标签添加的前缀，如果不使用默认是"x"
- this.$refs['form的ref'].validate
- 验证整个form是否通过校验
- this.$refs['form的ref'].validateField('对应表单的prop')
- 校验当个表单
- x-form
- x-input
- x-checkbox-group
- x-radio-group
- x-picker
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| rules | object | -- | 必填，校验规则 |
| model | object | -- | 必填，表单数据 |
| ref | Object | -- | x-form组件的应用可以调用validateField和validate |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | -- | 默认text,类型请插件uniapp文档 |
| val | string | Number | -- |
| prop | string | -- | 对应的校验规则，强烈推荐和改表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| val | string | Number | -- |
| prop | string | -- | 对应的校验规则，强烈推荐和改表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| val | string | Number | -- |
| prop | string | -- | 对应的校验规则，强烈推荐和改表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| val | string | Number | -- |
| prop | string | -- | 对应的校验规则，强烈推荐和改表单的绑定值得key保持一致 |
| @input | Function | -- | 同步数据到当前页面 |
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<x-form :rules="rules" :model="form" ref="ruleForm">
<view class="uni-form-item uni-column">
<view class="title">普通文字(改变的时候检测){{form.input}}</view>
<x-input type="text" :val="form.input" @input="form.input=$event" prop="input"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">普通文字(失去焦点的时候检测){{form.input2}}</view>
<x-input type="text" :val="form.input2" @input="form.input2=$event" prop="input2"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">时间选择:{{form.time}}</view>
<x-picker mode="time" start="09:00" end="06:00" :val="form.time" @input="form.time=$event" prop="time"></x-picker>
</view>
<view class="uni-form-item uni-column">
<view class="title">密码:{{form.password}}</view>
<x-input type="password" :val="form.password" @input="form.password=$event" prop="password"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">数字{{form.number}}</view>
<x-input type="number" :val="form.number" @input="form.number=$event" prop="number"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">小数点数字{{form.digit}}</view>
<x-input type="digit" :val="form.digit" @input="form.digit=$event" prop="digit"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">身份证{{form.idcard}}</view>
<x-input type="idcard" :val="form.idcard" @input="form.idcard=$event" prop="idcard"></x-input>
</view>
<view class="uni-form-item uni-column">
<view class="title">radio{{form.radio}}</view>
<x-radio-group :val="form.radio" @input="form.radio=$event" prop="radio">
<label>
<radio value="1" :checked="form.radio===1?true:false" />选项一</label>
<label>
<radio value="2" :checked="form.radio===2?true:false" />选项二</label>
</x-radio-group>
</view>
<view class="uni-form-item uni-column">
<view class="title">checkbox</view>
<x-checkbox-group :val="form.checkbox" @input="form.checkbox=$event" prop="checkbox">
<label v-for="item in items" :key="item.value">
<checkbox :value="item.name" :checked="form.checkbox.includes(item.name)" />{{item.value}}
</label>
</x-checkbox-group>
<button @tap="validInput('checkbox')">验证单个表单</button>
</view>
<view class="uni-btn-v">
<button formType="submit">使用Submit</button>
<button @tap="customerSubmit">不使用Submit提交</button>
<button type="default" formType="reset">Reset</button>
</view>
</x-form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'form',
pickerHidden: true,
chosen: '',
items: [{
name: 'USA',
value: '美国'
},
{
name: 'CHN',
value: '中国'
},
{
name: 'BRA',
value: '巴西'
},
{
name: 'JPN',
value: '日本'
},
{
name: 'ENG',
value: '英国'
},
{
name: 'TUR',
value: '法国'
}
],
form: {
input: "zz00",
input2:"zzyy",
passwordx: "123456",
number: "",
digit: "",
idcard: "",
checkbox: [],
radio: "",
time:""
},
rules: {
input: [{
required: true,
message: '请输入txt',
trigger: 'change'
}],
input2: [{
required: true,
message: '请输入input2',
trigger: 'blur'
}],
password: [{
required: true,
message: '请选择密码',
trigger: 'change'
}],
number: [{
required: true,
message: '请输入数字',
trigger: 'change'
}],
digit: [{
required: true,
message: '请输入小数点数字',
trigger: 'change'
}],
idcard: [{
required: true,
message: '请输入身份证',
trigger: 'change'
}],
checkbox: [{
type: 'array',
required: true,
message: '请选择checkbox',
trigger: 'change'
},
{
type: 'array',
min:2,
message: '请选择至少2个checkbox',
trigger: 'change'
},
],
radio: [{
required: true,
message: '请选择radio',
trigger: 'change'
}],
time: [{
required: true,
message: '请选择time',
trigger: 'change'
}],
}
}
},
methods: {
pickerConfirm: function(e) {
this.pickerHidden = true
this.chosen = e.target.value
},
pickerCancel: function(e) {
this.pickerHidden = true
},
pickerShow: function(e) {
this.pickerHidden = false
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
},
formReset: function(e) {
console.log("清空数据")
this.chosen = ''
},
xchange() {
console.log("改变")
},
customerSubmit(){
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
validInput(k){
this.$refs['ruleForm'].validateField(k)
}
}
}
</script>
<style>
.title {
padding: 10px 0 !important;
}
</style>
FAQs
a simgle tool for valid form
The npm package async-validator-uniapp receives a total of 0 weekly downloads. As such, async-validator-uniapp popularity was classified as not popular.
We found that async-validator-uniapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.