:onsubmit=>"return validate(this)“

本文详细介绍了使用 Ruby on Rails 的 form_for 方法实现表单验证的一种实现方式,包括使用 JavaScript 函数进行验证操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

form验证表单的一种实现方法。

<% form_for @rcrm_lead,:html=>{:multipart => true,:οnsubmit=>"return validate_lead_hi(this)"} do |@f| %>



function validate_lead_hi(thisform)
{
with (thisform)
{
if (validate_required(rcrm_lead_name,"姓名不能为空!!!")==false)
{rcrm_lead_name.focus();return false}
if (validate_required(rcrm_lead_certificateno,"身份证号码不能为空!!!")==false)
{rcrm_lead_certificateno.focus();return false}
if (validate_required(rcrm_lead_email,"电子邮件不能为空!!!")==false)
{rcrm_lead_email.focus();return false}
if (validate_required(rcrm_lead_graduation_certificate_number,"毕业证号不能为空!!!")==false)
{rcrm_lead_graduation_certificate_number.focus();return false}
}
}
<template> <div> <el-dialog :title="!dataForm.id ? '指令生成' : '修改'" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible" id="myOrder"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" style="margin-top: -0.275rem;background-color: #fff;border: 0px solid #DCDFE6;"> <!-- 升级类型 1-BMS升级 2-Tracker通讯板升级 --> <el-form-item label="升级类型" size="mini" prop="type"> <el-radio-group v-model="dataForm.type" :disabled="dataForm.id ? 'disabled' : null"> <el-radio :label="1">BMS升级</el-radio> <el-radio :label="2">Tracker通讯板升级</el-radio> <!-- <el-radio :label="2">参数设置</el-radio> --> </el-radio-group> </el-form-item> <el-form-item label="项目" prop="projectParameter"> <el-select v-model="dataForm.projectParameter" placeholder="请选择项目" @change="blurSelect" style="width:6rem" clearable> <el-option v-for="item in projectIds" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="项目名称" prop="projectRef"> <el-input v-model="dataForm.projectRef" placeholder="项目简称" style="width:6rem" readonly></el-input> </el-form-item> <el-form-item label="升级模式" size="mini" prop="orderType"> <el-radio-group v-model="dataForm.orderType" :disabled="dataForm.id ? 'disabled' : null"> <el-radio :label="1" @change="typeChange(1)">指定设备升级</el-radio> <el-radio :label="0" @change="typeChange(0)">所有设备升级</el-radio> </el-radio-group> </el-form-item> <el-form-item label="设备导入" v-if="showotaall"> <!-- <el-button v-if="isAuth('maya:myotarequest:batchUpgrade')" type="success" @click="otaBatchUpgradeHandle()" :disabled="dataListSelections.length != 2">批量升级</el-button> --> <el-button type="success" @click="otaBatchUpgradeHandle()" >Excel导入</el-button> </el-form-item> <el-form-item label="设备编号" prop="deviceCodes" v-if="showotaall"> <!-- <el-input v-model="dataForm.deviceCodes" placeholder="设备编号。多个用“;”隔开,如下224042102999025;411219000005615;411219000005617"></el-input> --> <el-autocomplete style="width:10rem" size="normal" v-model="dataForm.deviceCodes" :popper-append-to-body="false" :fetch-suggestions="querySearchAsync" @select="handleSelect" placeholder="请输入设备编号。多个用“;”隔开,如下224042102999025;411219000005615;411219000005617"> </el-autocomplete> </el-form-item> <el-form-item label="Topic" prop="topic"> <el-select v-model="dataForm.topic" placeholder="请选择topic" style="width:6rem" > <el-option v-for="item in topics" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <!-- <el-form-item label="通讯方式" prop="communicationMode"> <el-input v-model="dataForm.communicationMode" placeholder="通讯方式 0:暂无 1:串口 2:can 3:i2c"></el-input> </el-form-item> --> <!-- <el-form-item label="通讯类型" size="mini" prop="communicationMode"> <el-radio-group v-model="dataForm.communicationMode" :disabled="dataForm.id ? 'disabled' : null"> <el-radio :label="1">串口</el-radio> <el-radio :label="2">can</el-radio> <el-radio :label="3">i2c</el-radio> </el-radio-group> </el-form-item> --> <!-- <el-form-item label="can通讯的帧id" prop="frameIdCan"> <el-input v-model="dataForm.frameIdCan" placeholder="can通讯的帧id"></el-input> </el-form-item> <el-form-item label="通讯数据" prop="payload"> <el-input v-model="dataForm.payload" placeholder="通讯的数据"></el-input> </el-form-item> --> <!-- <el-form-item label="升级固件地址" prop="url"> <el-input v-model="dataForm.url" placeholder="升级时的固件地址"></el-input> </el-form-item> --> <!-- <el-form-item label="*固件地址" prop="url" v-if="showota"> --> <el-form-item label="*固件地址" prop="url"> <el-select v-model="dataForm.url" placeholder="升级固件地址" style="width:10rem"> <el-option v-for="item in uploadurls" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="硬件版本" prop="hardwareversion"> <el-input v-model="dataForm.hardwareversion" placeholder="要升级的目标电池硬件版本" style="width:6rem;padding-left:0.0rem;"></el-input> <br/><span style="color:blue;font-size:13px">✸ 可不填写,若指定要升级的目标电池硬件版本,填写请在前面请带上“V”,如V1.00,V1.02</span> </el-form-item> <el-form-item label="*软件版本" prop="softwareversion"> <el-input v-model="dataForm.softwareversion" placeholder="当前升级的固件的软件版本" style="width:6rem"></el-input> </el-form-item> <el-form-item label="是否执行" size="mini" prop="todoNow"> <el-radio-group v-model="dataForm.todoNow"> <el-radio :label="0">等待</el-radio> <el-radio :label="1">立即执行</el-radio> </el-radio-group> </el-form-item> <!-- <el-form-item label="固件MD5" prop="md5"> <el-input v-model="dataForm.md5" placeholder="固件MD5"></el-input> </el-form-item> <el-form-item label="固件大小" prop="size"> <el-input v-model="dataForm.size" placeholder="固件大小"></el-input> </el-form-item> <el-form-item label="配置是否处理 " prop="handled"> <el-input v-model="dataForm.handled" placeholder="配置是否处理 1:已处理 0:待处理"></el-input> </el-form-item> <el-form-item label="是否立即执行" prop="todoNow"> <el-input v-model="dataForm.todoNow" placeholder="是否立即执行 0:等待执行 1:立即执行"></el-input> </el-form-item>--> <!-- <el-form-item label="是否执行" size="mini" prop="todoNow"> <el-radio-group v-model="dataForm.todoNow"> <el-radio :label="0">等待</el-radio> <el-radio :label="1">执行</el-radio> </el-radio-group> </el-form-item> --> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">生成指令</el-button> </span> </el-dialog> <!-- 弹窗, Excel导入--> <ota-batch-upgrade v-if="otaBatchUpgradeVisible" ref="otaBatchUpgrade" @refreshDataList="onSubmit(1)"></ota-batch-upgrade> </div> </template> <script> import OtaBatchUpgrade from './myotabatchupgrade' export default { data () { return { visible: false, showotaall: true, otaBatchUpgradeVisible: false, projectIds:[], uploadurls:[], topics: [{ value: '/{productKey}/{deviceId}/maya7026/ota/upgrade/push', label: '固件升级(ota/upgrade/push)' } // , { // value: '/{productKey}/{deviceId}/upgradebox/{projectRef}/property/get', // label: '电池数据获取(property/get)' // } ], dataForm: { id: 0, type: 1, orderType: 1, projectParameter: '', deviceCodes: '', projectRef: '', topic: '', // communicationMode: 1, // frameIdCan: '', payload: '', url: '', hardwareversion: '', softwareversion: '', md5: '', size: '', handled: '', todoNow: 0, createTime: '', updateTime: '' }, dataRule: { type: [ { required: true, message: '升级类型 1-BMS升级 2-Tracker通讯板升级 不能为空', trigger: 'blur' } ], orderType: [ { required: true, message: '升级模式勾选 不能为空', trigger: 'blur' } ], projectParameter: [ { required: true, message: '不能为空', trigger: 'blur' } ], // deviceCodes: [ // { required: true, message: '设备编号不能为空', trigger: 'blur' } // ], // projectRef: [ // { required: true, message: '项目简称(用于topic)不能为空', trigger: 'blur' } // ], topic: [ { required: true, message: 'mqtt发送主题,如:battery/{batteryCode}/down/upgrade不能为空', trigger: 'blur' } ], // communicationMode: [ // { required: true, message: '通讯方式 0:暂无 1:串口 2:can 3:i2c不能为空', trigger: 'blur' } // ], // frameIdCan: [ // { required: true, message: 'can通讯的帧id不能为空', trigger: 'blur' } // ], // payload: [ // { required: true, message: '通讯的数据不能为空', trigger: 'blur' } // ], // url: [ // { required: true, message: '升级时的固件地址不能为空', trigger: 'blur' } // ], // md5: [ // { required: true, message: '固件MD5不能为空', trigger: 'blur' } // ], // size: [ // { required: true, message: '固件大小不能为空', trigger: 'blur' } // ], // handled: [ // { required: true, message: '配置是否处理 1:已处理 0:待处理不能为空', trigger: 'blur' } // ], todoNow: [ { required: true, message: '是否立即执行 0:等待执行 1:立即执行不能为空', trigger: 'blur' } ], // createTime: [ // { required: true, message: '不能为空', trigger: 'blur' } // ], // updateTime: [ // { required: true, message: '更新时间不能为空', trigger: 'blur' } // ] } } }, components: { OtaBatchUpgrade, }, methods: { typeChange(val){ // alert('packageChange') if(val=='1'){ // 指定电池升级,打开电池编号输入框 this.showotaall = true }else if(val=='0'){ // ota升级项目下所有电池 this.showotaall = false } }, // el-select失去焦点必填校验 blurSelect() { var project_name = this.dataForm.projectParameter.substring(this.dataForm.projectParameter.lastIndexOf("::")+2) this.$set(this.dataForm,'projectRef', project_name) }, querySearchAsync(queryString, cb) { clearTimeout(1000); var results = [] // alert('queryString='+queryString) if (queryString == '') { cb(results); } else { //掉接口需要的参数 this.$http({ url: this.$http.adornUrl('/mqtt/mqtttriad/getDeviceIds'), method: 'get', params: this.$http.adornParams({ 'deviceId': queryString, 'projectParameter': this.dataForm.projectParameter }) }).then(({data}) => { if (data && data.code === 0) { // alert(data.data.length) var result = data.data //循环放到一个远程搜索需要的数组 for (let i = 0; i < result.length; i++) { const element = result[i]; // alert(element) results.push({ value: element, id: i }) } cb(results); } else { console.log('没有数据的显示') results = [] cb(results); } }) } }, //点击出现搜索后点击的每一项 handleSelect(item) { this.id = item.id this.name = item.value }, init (id) { this.dataForm.id = id || 0 this.showotaall = true this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(`/maya/myotarequest/info/${this.dataForm.id}`), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.projectIds = data.data.projectMenus.projectIds this.uploadurls = data.data.OtaUrlMenus.uploads const socitem = data.data.mqttSends this.dataForm.type = socitem.type this.dataForm.projectParameter = socitem.projectParameter this.dataForm.deviceCodes = socitem.deviceCodes this.dataForm.projectRef = socitem.projectRef this.dataForm.topic = socitem.topic // this.dataForm.communicationMode = socitem.communicationMode // this.dataForm.frameIdCan = socitem.frameIdCan // this.dataForm.payload = socitem.payload this.dataForm.url = socitem.url this.dataForm.md5 = socitem.md5 this.dataForm.size = socitem.size this.dataForm.handled = socitem.handled this.dataForm.todoNow = socitem.todoNow this.dataForm.createTime = socitem.createTime this.dataForm.updateTime = socitem.updateTime } }) }else{ this.$http({ url: this.$http.adornUrl(`/maya/myotarequest/getOtaAndProjectMenus`), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.projectIds = data.data.projectMenus.projectIds this.uploadurls = data.data.OtaUrlMenus.uploads } }) } }) }, /** * 设备导入弹窗触发方法 */ otaBatchUpgradeHandle(){ this.otaBatchUpgradeVisible=true this.$nextTick(()=>{ this.$refs.otaBatchUpgrade.init() }) }, // 表单提交 dataFormSubmit () { if(this.dataForm.orderType==='1' || this.dataForm.orderType===1){ if(this.dataForm.deviceCodes === '' || this.dataForm.deviceCodes === undefined || this.dataForm.deviceCodes === null){ this.$message.warning('选择指定电池升级的,设备编号不能为空!') return } } // if(this.dataForm.type==='0' || this.dataForm.type===0){ if(this.dataForm.url === '' || this.dataForm.url === undefined || this.dataForm.url === null){ this.$message.warning('升级固件地址不能为空!') return } // if(this.dataForm.hardwareversion === '' || this.dataForm.hardwareversion === undefined || this.dataForm.hardwareversion === null){ // this.$message.warning('升级硬件版本不能为空!') // return // } if(this.dataForm.softwareversion === '' || this.dataForm.softwareversion === undefined || this.dataForm.softwareversion === null){ this.$message.warning('升级软件版本不能为空!') return } // } this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/maya/myotarequest/create`), method: 'post', data: this.$http.adornData({ 'id': this.dataForm.id || undefined, 'type': this.dataForm.type, 'orderType': this.dataForm.orderType, 'projectParameter': this.dataForm.projectParameter, 'deviceCodes': this.dataForm.deviceCodes, 'projectRef': this.dataForm.projectRef, 'topic': this.dataForm.topic, // 'communicationMode': this.dataForm.communicationMode, // 'frameIdCan': this.dataForm.frameIdCan, // 'payload': this.dataForm.payload, 'url': this.dataForm.url, 'hardwareversion': this.dataForm.hardwareversion, 'softwareversion': this.dataForm.softwareversion, 'md5': this.dataForm.md5, 'size': this.dataForm.size, 'handled': this.dataForm.handled, 'todoNow': this.dataForm.todoNow, 'createTime': this.dataForm.createTime, 'updateTime': this.dataForm.updateTime }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') // this.$emit('refreshDataList', this.dataForm.type,this.dataForm.communicationMode,this.dataForm.deviceCodes); } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style> #myOrder element.style { width: 150px; } </style>父组件是这样的
07-12
Component({ properties: { show: { type: Boolean, value: false }, title: { type: String, value: '表单标题' }, config: { type: Array, value: [] }, formData: { type: Object, value: {} }, modalName: { type: String, value: '' }, initData: { type: null, value: null, observer: function (newVal) { newVal && this.processInitData(newVal) } } }, data: { parentParams: {}, tempData: {}, errors: {}, processedConfig: [], loading: false }, observers: { 'show, modalName'(show, modalName) { show && modalName && this.loadModalConfig(modalName) } }, methods: { // 加载弹窗配置 async loadModalConfig(modalName) { this.setData({ loading: true }) try { let config = getModalConfig(modalName) if (!config) throw new Error(`未找到弹窗配置: ${modalName}`) // 处理前置逻辑 config = await this.processBeforeShow(config) this.setData({ processedConfig: config, loading: false }) } catch (error) { console.error('加载失败:', error) this.setData({ loading: false }) this.triggerEvent('error', { error }) } }, // 处理前置逻辑 async processBeforeShow(config) { const initData=this.properties.initData let processedConfig = []; if (initData) { if (Array.isArray(initData)) { // 处理数组类型 processedConfig.config = config.config.map((item, index) => index < initData.length ? { ...item, ...initData[index] } // 正确合并属性 : { ...item } // 超出部分保留原配置 ); return processedConfig; } else if (typeof initData === "object") { // 处理对象类型 processedConfig.config = config.config.map(configItem => { const key = configItem.field; return initData.hasOwnProperty(key) ? { ...configItem, ...initData[key] } // 直接属性访问 : { ...configItem }; }); return processedConfig; } } if (typeof config.beforeShow === 'function') { beforeData= await config.beforeShow() processedConfig.config = config.config.map(configItem => { const key = configItem.title; return beforeData.hasOwnProperty(key) ? { ...configItem, ...beforeData[key] } // 直接属性访问 : { ...configItem }; }); return processedConfig; } return config }, // 表单验证 validateForm() { const errors = {} this.data.processedConfig.config.forEach(section => { section.forEach(item => { if (item.verify && !this.data.formData[item.field]) { if(!item.verify(item.field)) errors[item.field] = item.errorMessage || `${item.title}必填` } }) }) return errors }, // 提交处理 async submitForm() { if (this.data.loading) return // 验证表单 const errors = this.validateForm() if (Object.keys(errors).length) { return this.setData({ errors }) } if(this.data.processedConfig.onSubmit){ this.data.processedConfig.onSubmit() this.setData({ loading: true }) this.closeModal() return; } try { this.setData({ loading: true }) // 触发提交事件 this.triggerEvent('submit', this.data.formData) this.closeModal() } finally { this.setData({ loading: false }) } }, // 关闭弹窗 closeModal() { this.setData({ show: false, processedConfig: [] }) this.triggerEvent('close') }, // 输入处理 handleInput(e) { const field = e.currentTarget.dataset.field const value = e.detail.value || e.detail this.setData({ [`formData.${field}`]: value, [`errors.${field}`]: '' }) this.data.processedConfig.config.forEach(section => { section.forEach(item => { if (item.onChange && !this.data.formData[item.field]) { item.onChange(item.field) } }) }) this.triggerEvent('change', { field, value }) } } })
最新发布
08-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值