小白都可直接拿来 c v 使用的表单验证
<el-form-item label="经营地址" prop="deptAddress" class="label">
<el-input v-model="form.deptAddress"></el-input>
</el-form-item>
<el-form-item
label="社会信用统一编码"
prop="creditCode"
class="label"
>
<el-input v-model="form.creditCode"></el-input>
</el-form-item>
<el-form-item label="企业固话" prop="fixedPhone" class="label">
<el-input
placeholder="区号—号码"
v-model="form.fixedPhone"
></el-input>
</el-form-item>
</div>
<el-form-item prop="protocol" class="label">
<el-checkbox v-model="form.protocol"
>本人已认真阅读且同意遵守<a href="#"
>《平台协议》</a
></el-checkbox
>
</el-form-item>
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click.prevent="submitForm('form')"
>提交</el-button
>
</el-form-item>
</el-form>
</div>
</div>
js部分 封装的api入口
<script>
import { toPlus } from '@/api/lessApi'//封装的api
export default {
data() {
var credit = (rule, value, callback) => {
var creditNum =
/^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/
if (!value) {
return callback(new Error('请输入社会信用统一编码'))
}else if (!creditNum.test(value)) {
callback(new Error('社会信用统一编码格式错误'))
}
callback();//没有这个回调 验证完成后,无法执行
}
var fixed = (rule, value, callback) => {
var fixedNum = /0\d{2,3}-[1-9]\d{6,7}$/
if (!value) {
return callback(new Error('请输入固定电话号'))
}else if (!fixedNum.test(value)) {
callback(new Error('固定电话格式错误'))
}
callback();
}
var proto = (rule, value, callback) => {
if (value === '' || value == false) {
callback(new Error('请勾选《平台协议》'))
}else{
callback();
}
}
return {
form: {
deptType: '',
deptName: '',
deptAddress: '',
creditCode: '',
fixedPhone: '',
protocol: true,
},
rules: {
deptType: [
{ required: true, message: '请选择单位类型', trigger: 'blur' },
],
deptName: [
{ required: true, message: '请输入单位名称', trigger: 'blur' },
{ min: 5, max: 9, message: '长度在5到9个字符', trigger: 'blur' }
],
deptAddress: [
{ required: true, message: '请输入单位地址', trigger: 'blur' },
],
//以上都是不加正则直接使用的,有需要用到正则的用下面这种方式
fixedPhone: [{ validator: fixed, trigger: 'blur' }],
protocol: [{ validator: proto, trigger: 'change' }],
creditCode: [{ required: true, validator: credit, trigger: 'blur' }],
//验证用到正则条件的,不分开写 也写 rules 里面如下:
creditCode: [{ required: true, message: "请输入统一社会信用编码", trigger: "blur" },
{
required: true,
message: "统一社会信用编码格式错误",
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
trigger: "blur"
}],
},
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let params = { ...this.form }
toPlus(params).then((res) => {
if(res.code == 1){}else {
this.$message.error(`${res.msg}`);
}
})
}
})
},
</script>