做家电家具回收用哪个网站好,赣州seo顾问,建设网站需要设备,东莞门户网站建设公司的一个老项目#xff0c;又要重新上架#xff0c;uniapp一套代码#xff0c;打包生成iOS端发布到App Store#xff0c;安卓端发布到腾讯应用宝、OPPO、小米、华为、vivo#xff0c;安卓各大应用市场上架要求不一样#xff0c;可真麻烦啊
光一个表单校验#xff0c;…公司的一个老项目又要重新上架uniapp一套代码打包生成iOS端发布到App Store安卓端发布到腾讯应用宝、OPPO、小米、华为、vivo安卓各大应用市场上架要求不一样可真麻烦啊
光一个表单校验就整了半天以前用的都是element-ui的现成的组件这有换成uni-form的记录一下怎么用的还用到了uni-data-picker选择器不过只能两级得搞个方法封装一下能多级
包括必填校验手机号校验身份证号校验邮箱校验 带required的就是有校验 name要对应model里的值要统一
// 限制只能输入数字
{format: number,errorMessage: 企业规模请输入数字
}// 手机号校验
{pattern: /^1[0-9][0-9]\d{8}$/,errorMessage: 请输入正确的手机号码
}// 身份证号校验
{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,errorMessage: 请输入正确的身份证号码
}// 邮箱校验
{format: email,errorMessage: 请输入正确的邮箱
} demo代码
templateview classcurr_mainviewuni-forms :modelValueformData refuniForm :rulesuniRulesuni-forms-item classcu-form-group label企业名称 nameenterpriseName requiredinput typetext v-modelformData.enterpriseName placeholder请输入企业名称 //uni-forms-itemuni-forms-item classcu-form-group label企业简称 nameenterpriseShortName requiredinput typetext v-modelformData.enterpriseShortName placeholder请输入企业简称 //uni-forms-itemuni-forms-item classcu-form-group label企业规模 nameenterpriseScale requiredinput v-modelformData.enterpriseScale placeholder请输入企业规模(人) //uni-forms-itemuni-forms-item classcu-form-group label联系电话 namephone requiredinput typetext v-modelformData.phone placeholder请输入联系电话 //uni-forms-itemuni-forms-item classcu-form-group label企业所在城市 namedistrictId requireduni-data-picker placeholder请选择企业所在城市 popup-title请选择企业所在城市 :localdatacityTree v-modelformData.districtId changeonchange nodeclickonnodeclick popupopenedonpopupopened popupclosedonpopupclosed/uni-data-picker/uni-forms-itemuni-forms-item classcu-form-group label详细地址 namephonetextarea maxlength-1 inputtextareaBInput v-modelformData.address placeholder请输入详细地址/textarea/uni-forms-itemuni-forms-item classcu-form-group margin-top label姓名 namelegalName requiredinput typetext v-modelformData.legalName placeholder请输入姓名 //uni-forms-itemuni-forms-item classcu-form-group label身份证号码 namelegalPassNumber requiredinput typetext v-modelformData.legalPassNumber placeholder请输入身份证号 //uni-forms-itemuni-forms-item classcu-form-group label邮箱 nameemail requiredinput typetext v-modelformData.email placeholder请输入邮箱 //uni-forms-item/uni-forms/viewview classflex justify-between padding-sm bg-fffbutton classcu-btn round button-primary width-48 stylewidth:100% clicksubmit()提交/button/view/view
/template
scriptexport default{data(){return{pickerData: ,formData: {districtId: ,enterpriseName: ,enterpriseShortName: ,enterpriseCertificateType: ,certificateCode: ,enterpriseScale: ,phone: ,address: ,legalName: ,legalPassType: ,legalPassNumber: ,id: uni.getStorageSync(userId),email: },cityTree: [],uniRules: {enterpriseName: {rules: [{required: true,errorMessage: 请输入企业名称,}]},enterpriseShortName: {rules: [{required: true,errorMessage: 请输入企业简称,}]},districtId: {rules: [{required: true,errorMessage: 请选择企业所在城市,}]},enterpriseScale: {rules: [{required: true,errorMessage: 请输入企业规模},{format: number,errorMessage: 企业规模请输入数字}]},phone: {rules: [{required: true,errorMessage: 请输入联系电话,},{pattern: /^1[0-9][0-9]\d{8}$/,errorMessage: 请输入正确的手机号码}]},legalName: {rules: [{required: true,errorMessage: 请输入姓名,}]},legalPassNumber: {rules: [{required: true,errorMessage: 请输入身份证号码,},{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,errorMessage: 请输入正确的身份证号码}]},email: {rules: [{required: true,errorMessage: 请输入邮箱,},{format: email,errorMessage: 请输入正确的邮箱}]},},}},components:{},onLoad(params) {this.getCity()},methods:{onnodeclick(e) {this.formData.districtId e.id},onpopupopened(e) {console.log(popupopened);},onpopupclosed(e) {console.log(popupclosed);},onchange(e) {console.log(onchange:, e);},getCity(){let areaRows [{id: 130000,status: 1,creator: null,creationTime: null,modifier: null,modificationTime: null,districtName: 河北省,districtShortName: 河北省,parentId: 0,level: 1,sortNumber: 30,cities: [{id: 130100,status: 1,creator: null,creationTime: null,modifier: null,modificationTime: null,districtName: 石家庄市,districtShortName: 石家庄,parentId: 130000,level: 2,sortNumber: 10,cities: [{id: 130100,status: 1,creator: null,creationTime: null,modifier: null,modificationTime: null,districtName: 和平区,districtShortName: 和平区,parentId: 130001,level: 3,sortNumber: 10,cities: null},]},]},{id: 140000,status: 1,creator: null,creationTime: null,modifier: null,modificationTime: null,districtName: 山西省,districtShortName: 山西省,parentId: 0,level: 1,sortNumber: 40,cities: [{id: 140100,status: 1,creator: null,creationTime: null,modifier: null,modificationTime: null,districtName: 太原市,districtShortName: 太原市,parentId: 140000,level: 2,sortNumber: 10,cities: null},]}]areaRows?.map((item, index) {item.text item.districtName;item.value item.id;item.children item.cities;item.children?.map((el, inde) {el.text el.districtName;el.value el.id;item.children item.cities});});console.log(areaRows);// 试了下只能两层this.cityTree areaRows},textareaBInput(e) {this.textareaBValue e.detail.value},submit(){console.log(this.formData);this.$refs.uniForm.validate().then(res{console.log(表单数据信息, res);}).catch(err {console.log(表单错误信息, err);})},},}
/script
style langscss
/style
