uniapp 自定义 element 表单验证

 

 uniapp父子组件不能获取对象里面放函数

<template>
<view>
<slot></slot>
</view>
</template>
<script>
export default {
name: 'hForm',
provide() {
return {
form: this,
}
},
props: {
model: {
type: Object,
default () {
return {}
}
},
rules: {
type: Object,
default () {
return {}
}
}
},
mounted() {

},
methods: {
validate(e) {
var tasks = this.$children
var flag = true
var err = {}
tasks.forEach(item => {
if (item.prop) {
if (!item.validate()) {
err = item
}
}
})
if (err.error) {
if (e == "btn") {
uni.showToast({
title: err.errortext,
icon: "none",
duration: 2000
});
}
flag = false
}
return flag
}
}
}
</script>
<style lang="scss" scoped>

</style>

 

 

<!-- 绑定value属性 使用的是父组件传入的参数 实现input事件 派发事件 固定写法 -->
<template>
<input class="fromY-item-p2 hang1" :placeholder="placeholder" :type="type" :value="value" @input="onInput"
@blur="onBlur" />
</template>
<script>
export default {
name: 'ElInput',
inject: ['it'],
props: {
value: {
type: String,
default: '',
},
type: {
type: String,
default: 'text',
},
placeholder: {
type: String,
default: '请输入内容',
},
},
methods: {
onInput(e) {
if(!this.it.prop) return
if (this.it.form.rules[this.it.prop].trigger != "input") return
this.$emit('input', e.target.value)
this.$nextTick(function() {
this.$parent.validate()
})
},
onBlur(e) {
if(!this.it.prop) return
this.$emit('input', e.target.value)
this.$nextTick(function() {
this.$parent.validate()
})
}
}
}
</script>
<style lang="scss" scoped>

</style>

 

 

<template>
<view class="fromY-item">
<label class="fromY-item-p1" v-if="label">{{ label }}<text v-if="prop" style="color: #FF7E7A;">*</text></label>

<slot></slot>

<p class="fromY-item-p3" v-if="error" style="color:red">{{ errortext }}</p>
<view class="border-line-b" />
</view>
</template>
<script>
export default {
name: 'hFormItem',
inject: ['form'],
provide() {
return {
it: this,
}
},
props: ['label', 'prop'],
data() {
return {
errortext: '',
error: false,
}
},
methods: {
validate() {
var model = this.form.model[this.prop]
var rules = this.form.rules[this.prop]
this.errortext = rules.message
var flag = true
if (rules.validator == "sfz") {
flag = this.$common.checkIDcard(model)
!flag ? this.error = true : this.error = false

} else {
if (model) {
this.error = false
flag = true
} else {
this.error = true
flag = false
}
}
return flag
}
}
}
</script>
<style lang="scss" scoped>
</style>

 

 

<template>
<view class="login">
<ye title="申请代理">
<view slot="neir" class="neir">
<h-from :model="from" :rules="rules" ref="from">
<h-from-item label="姓名" prop="name">
<h-from-input v-model="from.name"></h-from-input>
</h-from-item>
<h-from-item label="身份证" prop="card">
<h-from-input v-model="from.card"></h-from-input>
</h-from-item>
<h-from-item label="身份证1" >
<h-from-input v-model="from.card1"></h-from-input>
</h-from-item>
</h-from>
<view class="btn-bot">
<button class="b2" style="width: 80%;" @click="add">
提交
</button>
</view>
</view>

</ye>
</view>
</template>

<script>
import hFrom from "@/components/hFrom/hFrom.vue"
import hFromItem from "@/components/hFrom/hFromItem.vue"
import hFromInput from "@/components/hFrom/hFromInput.vue"
export default {
components: {
hFrom,
hFromItem,
hFromInput
},
data() {
return {
isLoad: true,
from: {
name: "",
card: "",
card1: "",
id: ""
},
rules: {
name: {
message: '请输入姓名',
trigger: 'input'
},
card: {
message: '请输入正确身份证',
validator: "sfz",
trigger: 'input'
},
card1: {
message: '请输入正确身份证',
validator: "sfz",
trigger: 'input'
},
}
}
},
mounted() {

},
methods: {
add() {
var that = this
if (this.$refs.from.validate("btn")) {
console.log("提交")
}
}
}
}
</script>

<style lang="scss" scoped>
.neir {
height: 100%;
background: #fff;
padding: 0 20rpx;
}
</style>