效果图
明显已经校验并提交到服务器，得到数据返回
文章来源：https://www.toymoban.com/news/detail-569809.html
uniapp完整代码
用到u-view ui框架（推荐，确实好看），链接文章来源地址https://www.toymoban.com/news/detail-569809.html
<template>
<view style="padding: 0 30rpx;">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
<u-form-item :required="required" label="姓名" prop="userInfo.name" borderBottom>
<u--input maxlength="4" v-model="model1.userInfo.name" border="none"></u--input>
</u-form-item>
<u-form-item :required="required" labelWidth='72' label="身份证号" prop="userInfo.userid" borderBottom>
<u--input maxlength="18" v-model="model1.userInfo.userid" border="none"></u--input>
</u-form-item>
<u-form-item :required="required" labelWidth='72' label="联系电话" prop="userInfo.Telephone" borderBottom>
<u--input maxlength="11" v-model="model1.userInfo.Telephone" border="none"></u--input>
</u-form-item>
<u-form-item :required="required" labelWidth='72' label="所在地址" prop="userInfo.address" borderBottom
@click="show_true">
<u--textarea v-model="model1.userInfo.address" placeholder="请选择地区" height="18" disabled count>
</u--textarea>
</u-form-item>
<u-form-item :required="required" labelWidth='72' label="详细地址" prop="userInfo.addresse" borderBottom>
<u--input v-model="model1.userInfo.addresse" border="none"></u--input>
</u-form-item>
</u--form>
<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"
@cancel="show_false"></u-picker>
<u-button @click="submit">提交</u-button>
</view>
</template>
<script>
export default {
data() {
return {
required: true,
show: false,
text: '',
columns: [
['广西', '广东', "海南", "贵州", "云南", "北京", "天津", "河北", "山西", ],
['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '桂平', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
],
columnData: [
['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '桂平', '玉林', '百色', '贺州', '河池', '来宾', '崇左', "其他"],
['广州', '珠海', '深圳', '汕头', '佛山', '韶关', '湛江', '肇庆', '江门', '茂名', '惠州', '梅州', '汕尾', '河源', '阳江', '清远',
'东莞', '中山', '潮州', '揭阳', '云浮', "其他"
],
["海口", "三亚", "五指山", "琼海", "儋州", "文昌", "万宁", "东方", "澄迈县", "定安县", "屯昌县", "临高县", "白沙黎族自治县", "昌江黎族自治县",
"乐东黎族自治县", "陵水黎族自治县", "保亭黎族苗族自治县", "琼中黎族苗族自治县", "其他"
],
["贵阳", "六盘水", "遵义", "安顺", "铜仁地区", "毕节地区", "黔西南布依族苗族自治州", "黔东南苗族侗族自治州", "黔南布依族苗族自治州", "其他"],
["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏傣族景颇族自治州", "怒江傈僳族自治州", "迪庆藏族自治州", "大理白族自治州",
"楚雄彝族自治州", "红河哈尼族彝族自治州", "文山壮族苗族自治州", "西双版纳傣族自治州", "其他"
],
["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区",
"昌平区", "大兴区",
"平谷区",
"怀柔区", "密云县", "延庆县", "其他"
],
["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区",
"北辰区", "武清区", "宝坻区",
"宁河县", "静海县", "蓟 县", "其他"
],
["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水", "其他"],
["太原", "大同", "阳泉", "长治", "晋城", "朔州", "忻州", "吕梁", "晋中", "临汾", "运城", "其他"],
],
model1: {
userInfo: {
name: '',
userid: '',
Telephone: '',
address: '',
addresse: ''
},
},
rules: {
'userInfo.name': {
type: 'string',
required: true,
// 自定义验证函数，同步校验
validator: (rule, value, callback) => {
//返回true表示校验通过，返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的，uview自带的校验方法，此处也可以自己写校验函数
return this.$u.test.chinese(value) || this.$u.test.landline(value);
},
message: '请输入真实姓名',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
},
'userInfo.userid': {
type: 'string',
required: true,
validator: (rule, value, callback) => {
return this.$u.test.idCard(value);
},
message: '请输入真实身份证号',
trigger: ['change', 'blur'],
},
'userInfo.Telephone': {
type: 'number',
required: true,
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: '请入真实手机号',
trigger: ['change', 'blur'],
},
'userInfo.address': {
type: 'array',
required: true,
validator: (rule, value, callback) => {
return this.$u.test.array(value);
},
message: '请选择地址',
trigger: ['change', 'blur'],
},
'userInfo.addresse': {
type: 'string',
required: true,
validator: (rule, value, callback) => {
return this.$u.test.chinese(value) || this.$u.test.landline(value) || this.uni.$u.test
.enOrNum();
},
message: '请输入详细地址',
trigger: ['change', 'blur'],
},
},
radio: '',
switchVal: false
};
},
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
//onReady() {
//let that = this
//that.$refs.form1.setRules(that.rules);
//},
methods: {
// 多联动显示/关闭
show_false() {
this.show = false
},
show_true() {
this.show = true
},
// 多联动
changeHandler(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
// 微信小程序无法将picker实例传出来，只能通过ref操作
picker = this.$refs.uPicker
} = e
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例，变化第二列对应的选项
picker.setColumnValues(1, this.columnData[index])
}
},
// 回调参数为包含columnIndex、value、values
confirm(e) {
this.model1.userInfo.address = e.value
this.show = false
},
//表单校验
submit() {
this.$refs.form1.validate().then(res => {
uni.$u.toast('校验通过')
//获取表单数据并发送请求
let data = this.model1;
uni.request({
method:'POST',
url: "http://www.biaodan.com/diqvid",
data: {
firm:data.userInfo
},
success: function(res) {
console.log(res.data);
}
})
}).catch(errors => {
uni.$u.toast('校验失败')
})
}
},
};
</script>
<style lang="scss">
</style>
到了这里，关于uniapp表单校验和提交的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
