dom部分：
<el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="版本号" prop="version"><el-input v-model="ruleForm.version" placeholder="示例：x.y.z"></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>
js部分：
export default {data() {var checkVersion = (rule, value, callback) => {if (!value) {return callback(new Error('版本号不能为空'));}let reg = /^[1-9]\d?(\.(0|[1-9]\d?)){2}$/;if(reg.test(value)){callback();}else{return callback(new Error('请输入正确的版本号，示例：x.y.z （数字：x为1-99，y和z为0-99）'));}};return {ruleForm: {name: "",version: ""},rules: {name: [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],version: {required: true, validator: checkVersion, trigger: "blur"}},};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},mounted() {},};</script>
作者博客：
