前后端分离提交多次验证

<template><el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="500px"><el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"><el-form-item label="数量" prop="number"><el-input v-model="form.number" style="width: 370px;"/></el-form-item><el-form-item label="名称" prop="name" ><el-input v-model="form.name" style="width: 370px;"/></el-form-item><el-form-item label="开始编号" prop="sid"><el-input v-model="form.sid" style="width: 370px;"/></el-form-item><el-form-item label="结束编号" prop="eid"><el-input v-model="form.eid" style="width: 370px;"/></el-form-item><el-form-item label="生命周期" prop="lifeTime"><el-select v-model="form.lifeTime" style="width: 370px;" placeholder="请选择针卡寿命值"><el-option :value="1400000"/><el-option :value="3000000"/><el-option :value="3500000"/><el-option :value="6000000"/><el-option :value="8000000"/></el-select></el-form-item><el-form-item label="备注" ><el-input v-model="form.remarks" rows="3" type="textarea" style="width: 370px;"/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="text" @click="cancel">取消</el-button><el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button></div></el-dialog>
</template><script>
import { add, edit } from '@/api/ftzk'
export default {props: {isAdd: {type: Boolean,required: true}},data() {const eid = (rule, value, callback) => {if (!value) {callback(new Error('结束编号不能为空'))} else if (!this.isvalidnumber(value)) {callback(new Error('添加针卡数量为:' + this.form.number + ',开始编号与结束编号不匹配.'))} else {callback()}}return {loading: false, dialog: false,form: {id: '',number: '',name: 'FTPC-型号-XXX',sid: '',eid: '',lifeTime: '',testNumber: '',times: '',flag: '',lastTime: '',remarks: ''},rules: {number: [{ required: true, message: '数量不能为空', trigger: 'blur' }],sid: [{ required: true, message: '开始编号不能为空', trigger: 'blur' }],lifeTime: [{ required: true, message: '请选择生命周期', trigger: 'blur' }],eid: [{ required: true, trigger: 'blur', validator: eid }]}}},methods: {cancel() {this.resetForm()},doSubmit() {const a = this.form.nameconst b = a.indexOf('型号')if (b > 0) {this.$message({message: '请修改默认值型号',type: 'warning'})} else {this.$refs['form'].validate((valid) => {if (valid) {this.loading = trueif (this.isAdd) {this.doAdd()} else this.doEdit()}})}},isvalidnumber(str) {const number = this.form.numberconst sid = this.form.sidconst eid = this.form.eidconst reg = (eid - sid) + 1const f = (parseInt(number) === parseInt(reg))return f},isvalidname(str) {const bool = this.form.name.indexOf('型号')if (bool > 0) {alert('针卡名称不可以为默认值,请修改默认的针卡名称.')return false}return true},doAdd() {add(this.form).then(res => {this.resetForm()this.$notify({title: '添加成功',type: 'success',duration: 2500})this.loading = falsethis.$parent.init()}).catch(err => {this.loading = falseconsole.log(err.response.data.message)})},doEdit() {edit(this.form.name).then(res => {this.resetForm()this.$notify({title: '修改成功',type: 'success',duration: 2500})this.loading = falsethis.$parent.init()}).catch(err => {this.loading = falseconsole.log(err.response.data.message)})},resetForm() {this.dialog = falseif (this.$refs['form'] !== undefined) {this.$refs['form'].resetFields()}this.form = {id: '',number: '',name: 'FTPC-型号-XXX',sid: '',eid: '',lifeTime: '',testNumber: '',times: '',flag: '',lastTime: '',remarks: ''}}}
}
</script><style scoped></style>

前后端分离提交多次验证相关推荐

WEB前后端分离开发中的验证与安全问题
登录验证以及安全问题: 1.请求接口全部用post方式,在后端判断请求方式是否为post 2.登录密码等敏感信息要加密后传输,如用RSA(支付宝里可下载公私钥生成工具),客户端公钥加密,传到服务器后 ...
springboot前后端分离，邮箱/手机验证号激活和登录，手机注册和激活
@TOC 1.父项目 1.1.依赖 2.前端项目 2.1.依赖 <?xml version="1.0" encoding="UTF-8"?> < ...
前后端分离项目token怎么验证_微信端前后端分离开发中token验证和数据的获取...
微信端前后分离开发中,授权认证,获取token和openid是必不可少的一步. 我们的思路是,每次调用接口前,判断cookie里面是否有token和openid,没有的话判断url参数中是否存在,没有 ...
前后端分离项目token怎么验证_前后端分离，获取token，验证登陆是否失效
public classJwtUtils {/*** 密钥*/ private static final String SECRET="xxxx";/*** 默认字段key:exp ...
Django+Vue，前后端分离，实现用户权限认证
网上教程一大堆,要么思路不够清晰,要么给你扔一大段代码,只有几行注释.... 看了我这个,你奶奶来都能实现前后端分离用户权限认证! Django 采用token认证方式,使用 rest_framewo ...
前后端分离重复提交_阿里一面：如何保证API接口数据安全？
前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端 ...
【sprintboot+vue】前后端分离模式下的登录验证码验证
[项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...
Node — 第六天（前后端分离）及（身份验证）
综合应用服务端知识点搭建项目下载安装所需的第三方模块 npm init -y npm i express cors mysql # express 用于搭建服务器 # cors 用于解决跨域 # m ...
前后端分离之权限验证
前后端分离之权限验证原理:将登录验证的请求头中后端生成的秘钥(token)接收后存储在cookie内,在再次请求数据时添加在请求头中发送给后端验证,请求数据. 代码: 登录ajax: $scope. ...

前后端分离提交多次验证

前后端分离提交多次验证相关推荐

最新文章

热门文章