序文
プラグインがないため、uni-appを使用して小さなプログラムを開発します。検証は手動でしか記述できません。
アイデア
最初の考慮事項はカスタムコマンドを作成することです。このコマンドには双方向のデータバインディングと検証の2つの機能が含まれています
が、実際の操作では、uni-appではカスタムコマンドの使用が許可されていない
ため、手動検証を使用してください。低メソッドを比較する。このメソッドは要素の検証仕様を参照します。現在のところ実装は簡単です。このメソッドは将来改善される予定です。
以下は、パブリックjsをカプセル化する実装プロセスです。
検証が必要な場合は、検証値とルールを渡します-検証が失敗します（プロンプト+ falseを返します）-検証が成功します（trueを返します）
コード
公開検証js
rules.jsのパブリックファイルを作成します
function rules(info,rule) {
for(var i in rule){
// 判断rule和info的值是否是一一对于
if(info[i] === undefined){
console.log(`传入的数据没有${
i}`)
// 不对应则跳过，没有验证此跳过方法
// continue
return false
}
for(let j=0;j<rule[i].length;j++){
// 判断是否是必填项
if(rule[i][j].required){
if(info[i] == ''){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
//判断最小输入值min
if(rule[i][j].min){
if(info[i].length < rule[i][j].min){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
//判断最大输入值max
if(rule[i][j].max){
if(info[i].length > rule[i][j].max){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
// 正则判断pattern
if(rule[i][j].pattern){
if(!rule[i][j].pattern.test(info[i])){
uni.showToast({
title: rule[i][j].message || '校验不通过',
icon: 'none'
})
return false
}
}
}
}
return true
}
module.exports = rules
小さなプログラムプロジェクトは大きくなく、多くの検証を必要としないため、現在、最大値、最小値、必要な項目、および規則性について4つのメソッドのみが記述されています。必要に応じて検証ルールを追加できます。
パブリックメソッドをマウントする
main.jsでvueにパブリックメソッドをマウントします
import rules from '@/utils/rules.js'
// 校验规则
Vue.prototype.$rules = rules
コードの使用状況を確認する
data() {
return {
cpledgeOrderDetail: {
handleType: '',
carNo: '',
custName: '',
custPhone: '',
provinceCode: '',
cityCode: '',
city:'',
province:'',
vehicleAdministrative: '',
remark: '',
finishTime: '',
juridicalPerson:'',
businessNumber:''
},
rules:{
city:[
{
required: true, message: '办理城市不能为空' }
],
finishTime:[
{
required: true, message: '预约办理时间不能为空' }
],
businessNumber:[
{
required: true, message: '申请办理笔数不能为空' },
{
max: 9, message: '申请办理笔数不能超过999999999' }
],
custName:[
{
required: true, message: '车主/联系人名字不能为空' },
{
pattern: /^([\u4e00-\u9fa5]){2,6}$/,
message: '车主/联系人姓名的限制为2-6中文!'
}
],
custPhone:[
{
required: true, message: '车主/联系人电话不能为空' },
{
pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
message: '请填写有效手机号'
}
]
}
}
},
methods: {
formOk(){
if(this.$rules(this.cpledgeOrderDetail,this.rules)){
uni.showLoading({
title:"提交中..."
})
//请求，此请求是经过封装的，不要疑为什么是res[1]，把请求换成自己的
this.$serve.post('orderEdit',this.cpledgeOrderDetail).then(res=>{
if(res[1]){
uni.hideLoading()
uni.navigateBack({
delta: 1
})
}
})
}
}
}
| パラメータ | 定義 | デフォルト |
|---|---|---|
| 必須 | 必要ですか？ | - |
| 最大 | 入力された最大値、通常は最小値と混合 | - |
| 分 | 入力の最小値。通常、最大値と混合されます。 | - |
| パターン | 定期チェックルール | - |
| メッセージ | 検証失敗のプロンプトワード | チェックに失敗しました |