Article directory
- Effect
- template
- js implementation
- The realization effect of passing the verification
Effect
Check the effect
template
<div>
<el-form ref="userFormRef" :model="userForm" :rules="userFormRule" label-width="100px"
:status-icon="true"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="Name:" prop="name">
<el-input v-model="userForm.name" placeholder="Please enter your name" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12">
<el-form-item label="age:" prop="age">
<el-input v-model.number="userForm.age" onkeyup="value=value.replace(/[^\d] + /g,'')" placeholder="Please Enter age" clearable />
</el-form-item>
</el-col>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="Phone:" prop="phone">
<el-input v-model="userForm.phone" placeholder="Please enter the phone number" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="email:" prop="email">
<el-input v-model="userForm.email" placeholder="Please enter your email address" clearable />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="Enrollment time:" required>
<el-col :span="11">
<el-form-item prop="date">
<el-date-picker v-model="userForm.date" value-format="yyyy-MM-dd" type="date" placeholder="Select Date"
style="width: 100%;"
/>
</el-form-item>
</el-col>
<el-col :span="2" style="text-align:center">
-
</el-col>
<el-col :span="11">
<el-form-item prop="time">
<el-time-picker v-model="userForm.time" placeholder="Select Time" style="width: 100%;" />
</el-form-item>
</el-col>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="Gender:" prop="gender">
<el-radio-group v-model="userForm.gender">
<el-radio label="0">
male
</el-radio>
<el-radio label="1">
female
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="weight:" prop="weight">
<el-input v-model="userForm.weight" oninput="value=value.replace(/[^0-9.]/g,'')"
placeholder="Please enter your weight"
clearable
>
<template slot="append">
kg
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="state:" prop="state">
<el-switch v-model="userForm. state" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Grade:" prop="grade">
<el-select v-model="userForm.grade" placeholder="Select Grade" style="width:100%" clearable>
<el-option label="First Grade" value="one" />
<el-option label="Second Grade" value="two" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="District of Birth:" prop="district">
<el-cascader
v-model="userForm.district"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="Personal specialty:" prop="hobby">
<el-checkbox-group v-model="userForm.hobby">
<el-checkbox label="0" name="hobby">
draw
</el-checkbox>
<el-checkbox label="1" name="hobby">
play basketball
</el-checkbox>
<el-checkbox label="2" name="hobby">
play the piano
</el-checkbox>
<el-checkbox label="3" name="hobby">
calligraphy
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Remarks:" prop="desc">
<el-input v-model="userForm.desc" placeholder="Please fill in the remarks" type="textarea" maxlength="50"
show-word-limit :rows="4"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">
submit
</el-button>
<el-button @click="resetForm()">
reset
</el-button>
</el-form-item>
</el-form>
</div>
js implementation
data () {<!-- -->
let cheapMobile = (rule, value, cb) => {<!-- -->
// The mobile phone number generally starts with "13" at the minimum
const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0- 35-9])\d{8}$/
if (regMobile.test(value)) {<!-- -->
return cb()
}
cb(new Error('Please enter a valid mobile phone number!'))
}
let checkEmail = (rule, value, callback) => {<!-- -->
const mailReg = /^([a-zA-Z0-9_-]) + @([a-zA-Z0-9_-]) + (.[a-zA-Z0-9_-]) + /
setTimeout(() => {<!-- -->
if (mailReg.test(value)) {<!-- -->
callback()
} else {<!-- -->
callback(new Error('Please enter the correct email format'))
}
}, 100)
}
return {<!-- -->
userForm: {<!-- -->
name: '',
age: 0, // limit the input to 0 and positive integers
phone: '',
email: '',
grade: '',
district: [], // The ID of the third level
weight: '0.00', // integer or two decimal places
date: '',
time: '',
state: false,
gender: '',
hobby: [],
desc: ''
},
options: [
{<!-- -->
value: '1',
label: 'Shaanxi Province',
children: [
{<!-- -->
value: '1-1',
label: 'Ankang City',
children: [
{<!-- -->
value: '1-1-1',
label: 'Hanbin District'
}, {<!-- -->
value: '1-1-2',
label: 'Shiquan'
}
]
}, {<!-- -->
value: '1-2',
label: 'Xi'an City',
children: [
{<!-- -->
value: '1-2-1',
label: 'Chang'an District'
}, {<!-- -->
value: '1-2-2',
label: 'Yanta District'
}
]
}
]
}, {<!-- -->
value: '2',
label: 'Henan',
children: [
{<!-- -->
value: '2-1',
label: 'Luoyang'
}, {<!-- -->
value: '2-2',
label: 'Pingdingshan'
}
]
}
],
userFormRule: {<!-- -->
name: [
{<!-- --> required: true, message: 'Please enter your name', trigger: 'blur' },
{<!-- --> min: 3, max: 5, message: 'length between 3 and 5 characters', trigger: 'blur' }
],
age: [{<!-- --> required: true, message: 'Please enter your age', trigger: 'blur' }],
phone: [
{<!-- --> required: true, message: 'The phone number is required, please enter the phone number!', trigger: 'blur' },
{<!-- --> validator: cheackMobile, trigger: 'blur' }
],
email: [
{<!-- --> required: true, message: 'Email is required, please enter your email!', trigger: 'blur' },
{<!-- --> validator: checkEmail, trigger: 'blur' }
],
grade: [{<!-- --> required: true, message: 'Please select a grade', trigger: 'change' }],
district: [{<!-- --> required: true, message: 'Please select the birth area', trigger: 'change' }],
weight: [
{<!-- --> required: true, trigger: 'blur', message: 'Please enter weight' },
{<!-- --> pattern: /(^[1-9]([0-9] + )?(\.[0-9]{1,2})?$)|(^(0 ){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: 'Please enter the correct format, two decimal places are allowed\ ' }
],
date: [{<!-- --> required: true, message: 'Please select a date', trigger: 'change' }],
time: [{<!-- --> required: true, message: 'Please select a time', trigger: 'change' }],
gender: [{<!-- --> required: true, message: 'Please select gender', trigger: 'change' }],
hobby: [{<!-- --> type: 'array', required: true, message: 'Please choose at least one hobby', trigger: 'change' }],
desc: [{<!-- --> required: true, message: 'Please fill in the remarks', trigger: 'blur' }]
}
}
},
methods: {<!-- -->
// submit Form
submitForm () {<!-- -->
this.$refs['userFormRef'].validate(valid => {<!-- -->
if (valid) {<!-- -->
console.log('valid success!!')
// The data that may be submitted to the backend, this call interface
console.log('userForm', this.userForm)
} else {<!-- -->
console.log('valid error!!')
return false
}
})
},
//reset form
resetForm () {<!-- -->
this.$refs['userFormRef'].resetFields()
},
// The event triggered by the change of the cascade selector, print out the selected value
handleChange (value) {<!-- -->
// The value value is finally an array. For example, if the user selects 'Shaanxi Province->Ankang City->Hanbin District', the printed value value is: ['1','1-1', '1-1-1']
console. log(value)
}
}
The realization effect of passing the verification
