我只是试图从我的模型或控制器在我的vuetify表单中添加验证并发出警报。
在我的.vue文件中
<v-row dense>
<v-col cols="3">
<v-text-field dense outlined label="Employee Code" v-model="emp_code"></v-text-field>
</v-col>
<v-col cols="3">
<v-text-field dense outlined label="Employee Name" v-model="emp_name"></v-text-field>
</v-col>
<v-col cols="2">
<v-text-field dense outlined label="Age" v-model="emp_age"></v-text-field>
</v-col>
<v-col cols="2">
<v-btn @click="Insert()">Insert</v-btn>
</v-col>
</v-row>
这就是它看起来的样子..
在我的脚本中,我有这样的数据
data: () => ({
emp_code:null,
emp_name:null,
emp_age:null,
}),
我的方法是...
methods: {
Insert(){
axios.post('api/employees', {
emp_code:this.emp_code,
emp_name:this.emp_name,
emp_age:this.emp_age
})
.then(res => {
console.log(res.data)
this.emp_code = null
this.emp_name = null
this.emp_age = null
})
}
}
Controller.php
public function store(Request $request)
{
$employee_data = $request->all();
$employee_code = "12345";
$employee_model = new EmployeeModel();
DB::transaction(function() use($employee_model, $employee_data, $employee_code){
$employee_model->InsertEmployee($employee_data, $employee_code);
});
}
我用的是DAO和DTO
Model.php
public function InsertEmployee($employee_data, $employee_code){
$employee_data['EmployeeCode'] = $employee_data['emp_code'];
$employee_data['EmployeeName'] = $employee_data['emp_name'];
$employee_data['Age'] = $employee_data['emp_age'];
$employee_data['UpdatedBy'] = $employee_code;
$dao_insert_employee = new DAO();
$dao_insert_employee->InsertEmployee($employee_data, $employee_code);
DAO.php
public static function InsertEmployee($employee_data, $employee_code){
DB::transaction(function() use($employee_data, $employee_code){
Employee::insert(
[
'EmployeeCode' => $employee_data["emp_code"],
'EmployeeName' => $employee_data["emp_name"],
'Age' => $employee_data["emp_age"],
'created_at' => date('Y-m-d H:i:s'),
'updated_at' => date('Y-m-d H:i:s'),
'deleted_at' => null,
'UpdatedBy' => $employee_code,
]
);
});
}
DTO.php
class DTO{
public $EmployeeCode;
public $EmployeeName;
public $Age;
public $deleted_at;
/**
* Get the value of EmployeeCode
*/
public function getEmployeeCode()
{
return $this->EmployeeCode;
}
public function setEmployeeCode($EmployeeCode)
{
$this->EmployeeCode = $EmployeeCode;
return $this;
}
//Other codes here...
现在,我可以在我的数据库中插入数据,但我想添加一个验证程序。我只想在文本字段中输入一个简单的警报(如下图)。
我还想验证雇员代码,它的最大长度为5位数,所以如果输入的数据是4位数以下或6位数以上,警报将显示消息,如“雇员代码是5位数只”。
※我尽量不对我的vue文件或文本字段的验证条件:maxlength='5'。※所有我想要的是显示警报,如果用户输入的emp_code是字母,显示警报('Employee Code must be a number.'),如果用户输入的emp_name是数字,显示警报(Employee Name must be a letter.).如果所有字段都是空的,显示警报('You must input all the fields.')
1条答案
按热度按时间nhhxz33t1#
您可以在**
v-text-field
标签上添加rules
**属性来控制淡入淡出验证。