<template><div><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="手机号" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item><el-form-item label="身份证号" prop="idNumber"><el-input v-model="ruleForm.idNumber"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="ruleForm.email"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div></template><script>export default {data() {return {ruleForm: {phone: "",email: "",idNumber: "",},rules: {phone: [{required: true, message: "请输入手机号", trigger: "blur" },// 这个只能验证手机号// { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }{pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }],idNumber: [{required: true, message: "请输入身份证号", trigger: "blur" },{pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}],email: [{required: true, message: "请输入邮箱", trigger: "blur" },{pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur"}],}};},methods: {submitForm(formphone) {this.$refs[formphone].validate(valid => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},resetForm(formphone) {this.$refs[formphone].resetFields();}}};</script><style lang="less">.el-input__inner {width: 200px;}</style>
