使用rules进行表单属性格式校检
目录
- 创建validtor.js文件
- 每个属性加上prop=“xxx”
- 引用对应的格式校检方法
创建validator.js文件
- 在src目录下创建一个validator.js文件
- 以下是validator.js的部分常用方法
// 验证ip
export function validateIP(rule, value, callback) {
if (value == '' || value == undefined || value == null) {
callback();
} else {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的IP地址'));
} else {
callback();
}
}
}
// 验证电话号码
export function validatePhone(rule, value, callback) {
const reg = /^[1][3-9][0-9]{9}$/;
if (value == '' || value == undefined || value == null) {
callback();
} else {
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的电话号码'));
} else {
callback();
}
}
}
// 两位小数验证
const validateValidity = (rule, value, callback) => {
if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
callback(new Error('最多两位小数！！！'));
} else {
callback();
}
};
// 密码校检
export const validatePsdReg = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入密码'))
}
if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,10}$/.test(value)) {
callback(new Error('请输入6-10位字母、数字或者符号组合'))
} else {
callback()
}
};
// 纯数字校检
export const validateNumber = (rule, value, callback) => {
let numberReg = /^\d+$|^\d+[.]?\d+$/;
if (value !== '') {
if (!numberReg.test(value)) {
callback(new Error('请输入纯数字'))
} else {
callback()
}
} else {
callback(new Error('请输入值'))
}
};
// 姓名校检
export const validateName = (rule, value, callback) => {
let reg=/^[\u2E80-\u9FFF]+$/;//Unicode编码中的汉字范围
if (value && value.length > 0) {
if(!reg.test(value)){
callback([new Error('姓名输入不合法')]);
}else{
callback();
}
}else if(value.length == 0){
callback();
} else {
callback(new Error('姓名输入不合法'));
}
}
将表单里面的每个属性进行pron的绑定
- 将表单进行校检的双向绑定
<el-form :model="psdform" :rules="rules">
- 将属性就行绑定
<el-form-item :label-width="formLabelWidth" label="请输入工号" prop="num">
<el-form-item :label-width="formLabelWidth" label="请输入手机号" prop="phone">
以下是表单的完整代码
<el-form :model="psdform" :rules="rules">
<el-form-item :label-width="formLabelWidth" label="请输入工号" prop="num">
<el-input @keyup.enter.native="forgetPsd" autocomplete="off" maxlength="12" name="num"
v-model="psdform.username"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" label="请输入手机号" prop="phone">
<el-input @keyup.enter.native="forgetPsd" autocomplete="off" name="phone"
v-model="psdform.phone"></el-input>
</el-form-item>
</el-form>
在当前需要就行校检的文件导入对应的校检方法
- 导入方法（导入时注意validator.js文件的存放路径）
import {validateNumber, validatePhone} from "../validator.js"
- 调用对应的校检方法
rules: {
username: [
{required: true, message: "账号不可为空", trigger: "blur"},
{type: "string", min: 12, message: "账号是12位纯数字"},
{validator: validateNumber}
],
phone: [
{required: true, message: "电话不可为空", trigger: "blur"},
{type: "string",},
{validator: validatePhone}
]
},
方便白嫖给出整个页面的代码
<template>
<div class="login">
<!-- 背景视频 -->
<video autoplay id="video-bg" loop muted src="../../public/imgs/bg.mp4"></video>
<!-- 登录框 -->
<div class="login-container">
<el-form :model="form" :rules="rules" class="login-box" label-width="80px" ref="loginForm">
<h2 class="login-title">赣南医学院体育后台管理</h2>
<el-form-item class="login_input" label="账号" prop="username" style="width: 91%;">
<el-input
@keyup.enter.native="onSubmit()"
autocomplete="off"
maxlength="12"
placeholder="请输入账号"
suffix-icon="el-icon-user-solid"
type="text"
v-model="form.username"
/>
</el-form-item>
<el-form-item label="密码" prop="password" style="width: 91%;">
<el-input
@keyup.enter.native="onSubmit()"
maxlength="10"
placeholder="请输入密码"
show-password
type="password"
v-model="form.password"
/>
</el-form-item>
<el-button @click="dialogFormVisible = true" class="forgetpsd" type="text">忘记密码</el-button>
<el-form-item>
<el-button style="width:88%;" type="primary" v-on:click="onSubmit()">登录</el-button>
</el-form-item>
</el-form>
<!-- 忘记密码弹窗 -->
<el-dialog :visible.sync="dialogFormVisible" title="忘记密码">
<el-form :model="psdform" :rules="rules">
<el-form-item :label-width="formLabelWidth" label="请输入工号" prop="num">
<el-input @keyup.enter.native="forgetPsd" autocomplete="off" maxlength="12" name="num"
v-model="psdform.username"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" label="请输入手机号" prop="phone">
<el-input @keyup.enter.native="forgetPsd" autocomplete="off" name="phone"
v-model="psdform.phone"></el-input>
</el-form-item>
</el-form>
<div class="dialog-footer" slot="footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button
:disabled="!psdform.username||!psdform.phone"
@click="forgetPsd()"
type="primary"
>确 定
</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import "../../public/css/login.css";
import $ from "../../public/js/jquery-3.3.1";
import {validateNumber, validatePsdReg, validatePhone} from "../validator.js"
import Qs from 'qs'
export default {
name: "Login",
data() {
return {
// 用户名 密码
form: {
username: "",
password: ""
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
username: [
{required: true, message: "账号不可为空", trigger: "blur"},
{type: "string", min: 12, message: "账号是12位纯数字"},
{validator: validateNumber}
],
password: [
{required: true, message: "密码不可为空", trigger: "blur"},
{type: "string", min: 6, message: "请输入6-10位字母、数字或者符号组合"},
{validator: validatePsdReg}
],
phone: [
{required: true, message: "电话不可为空", trigger: "blur"},
{type: "string",},
{validator: validatePhone}
]
},
// 对话框显示和隐藏
dialogFormVisible: false,
psdform: {
username: "",
phone: ""
},
formLabelWidth: "120px",
// 返回的密码
returnpsd: "",
token: ''
};
},
methods: {
// 登录判断
onSubmit() {
// 为表单绑定验证功能
const _this = this.form
let params = new URLSearchParams();
params.append('username', _this.username);
params.append('password', _this.password);
this.$https.post('/DoLogin', params).then((res) => {
localStorage.setItem('token',res.data.token)
if (res.data.token == 'true') {
this.$router.push("/home");
} else {
this.$message.error("请输入正确的账号密码");
}
});
},
// 忘记密码
forgetPsd() {
const _this = this.psdform
let params = new URLSearchParams();
params.append('username', _this.username);
params.append('phone', _this.phone);
this.$https.post('/GetPassword', params).then((res) => {
this.returnpsd = res.data.extend.password
if (this.returnpsd) {
this.$notify({
title: "成功",
message: "您的密码是" + this.returnpsd,
type: "success"
});
this.psdform.username = "";
this.psdform.phone = "";
this.dialogFormVisible = false;
} else {
this.$message.error("工号与手机号不匹配");
this.psdform.username = "";
this.psdform.phone = "";
this.dialogFormVisible = false;
}
})
}
}
};
</script>
<style scoped>
/* css通过外联引入 */
</style>
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
