關於表單的驗證

vue表單的驗證:

關於表單的驗證,在element中提供了驗證表單的方式

在這裏插入代碼片
<el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  export default{
	data(){
	return{
		rule:{
		name:[{
		//校驗表單不能爲空
		 { required: true, message: '請輸入活動名稱', trigger: 'blur' },
		 //校驗表單長度
         { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' },
         //自定義表單驗證
         {
         validator:(rule,value,callback)=>{
         //正則表達式驗證方法
         //驗證不能輸入漢字
			if(value){
			if(/[\u4E00-\u9FA5]/g.test(value)){
				callback(new Error('不能輸入漢字,請重新輸入'))
			}else{
				callback()
			}}
		}}
		}]
	}  
	}
	}
 }

對數字輸入框進行驗證時:

<input v-model.number='formData.age'></input>

此時輸入框才生效進行數字驗證

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章