表单验证不成功（如何解决表单验证不通过却进入下一页）
本文目录
如何解决表单验证不通过却进入下一页
在form标记里写《from name="form1" onsubmit="return check()"》
你有form标签吗？如果没有用这个试一下
《input name="button1" type="submit" id="bunton1" value="上传" onsubmit="return check()"》
为什么Form表单的自定义验证失效了
很多时候，需要对Yii表单model中的对象设置的rules进行判断，但是有的时候可能需要在提交之前就在客户端进行验证，我这边设置的方法是在提交按钮上设置监听器，如果部分内容为空（比如多选按钮没有选择），那么提示出错信息。主要目的是页面不用提交后刷新，进入controller的对应函数之后再判断出错。显示rules（）验证规则函数的错误信息。
这里为了验证是否选择某个单选按钮，对提交的按钮onclick设置监听，具体如下
《Button onclick = "return fun()"/》
自定义fun()函数，需要有return true和false两种情况
《script》 function fun(){ var CheckBox = document.getElementsByName(’checkBox.checked == true){ count++; } } if(count == 0 ){ var errorMeg = document.getElementById(’HomeworkTrConfig_flag_em_’); errorMeg.style.display = ""; errorMeg.innerHTML="请至少选择一项"; return false; }else{ return true; } } 《/script》
补充：Yii表单验证中，提交前验证，不通过不提交
以前记得有这么一个写法，就是当表单中的内容不符合验证规则时，会不允许提交，时间一长忘了怎么写了，手册里面也没写，查了一下资料，做一下笔记 ：
$form = $this-》beginWidget(’CActiveForm’,array( ’id’ =》 ’add_host’, ’enableAjaxValidation’ =》 false, ’enableClientValidation’ =》 true, ’clientOptions’ =》 array( ’validateOnSubmit’ =》 true //在这个位置做验证 ), ’focus’ =》 array($model,’ip’) )); ?》
关于element循环表单校验不生效问题
项目中有如下需求：
可以添加一个列表 =》 添加弹框 =》 里面可以添加多个产品（产品里面可以添加多个对接人跟政策），所以数据结构应该如下
ruleForm: {
companyName: ’’, // 公司名称
financialProduct: [
// 产品数组
{
productName: ’’, // 产品名称
dockingPerson: [
// 对接人
{
dockingName: ’’, // 联系人
}
],
financialPolicy: [
// 返利政策
{
makeWay: ’’, // 计提条件
}
]
}
]
},
但是在提交表单的时候验证不了，rule不起作用，因为数据是循环出来的，所以不起作用，解决办法如下：
《template》
《div class="addProduct_wrapper"》
《!-- 中间内容区域 --》
《div class="center_content"》
《el-form
ref="ruleForm"
:model="ruleForm"
label-width="80px"
:rules="rules"》
《!-- 上方的列表 --》
《div class="basic_info"》
《div class="info_box"》
《el-form-item label="公司名称" prop="companyName"》
《el-input placeholder="请输入公司的名称" v-model="ruleForm.companyName"》《/el-input》
《/el-form-item》
《/div》
《!-- 产品盒子 --》
《div class="product_box" v-for="(item, index) in ruleForm.financialProduct" :key="index"》
《!-- 关闭按钮 --》
《span class="closeBtn" @click="delateProduct(index)" v-if="index !== 0"》X《/span》
《!-- 产品详情 --》
《div class="product_detail"》
《el-form-item label="产品详情"》《/el-form-item》
《!-- name盒子 --》
《div class="name_box"》
《div style="width: 300px;"》
《el-form-item label="产品名称"
:prop="`financialProduct.${index}.productName`"
:rules="financialProductRules.productName"》
《el-input placeholder="请输入产品名称" v-model="item.productName"》《/el-input》
《/el-form-item》
《/div》
《/div》
《/div》
《!-- 对接人 --》
《div class="pickPeople"》
《el-form-item label="对接人" label-width="95px"》《/el-form-item》
《div class="people_wrapper" v-for="(items, indexs) in ruleForm.financialProduct.dockingPerson" :key="indexs"》
《div》
《el-form-item label="对接人"
:prop="`financialProduct.${index}.dockingPerson.${indexs}.dockingName`"
:rules="dockingPerson.dockingName"
》
《el-input placeholder="请输入联系人姓名" v-model="items.dockingName"》《/el-input》
《/el-form-item》
《/div》
《/div》
《el-button type="primary" style="margin-left: 10px;" @click="addPickPeople(index)"》添加对接人《/el-button》
《/div》
《!-- 政策 --》
《div class="rebatePolicy"》
《el-form-item label="政策"》《/el-form-item》
《div class="rebate_box" v-for="(homes, indexHomes) in item.financialPolicy" :key="indexHomes"》
《div》
《el-form-item label="政策"
:prop="`financialProduct.${index}.financialPolicy.${indexHomes}.makeWay`"
:rules="dockingPerson.makeWay"
》
《el-input placeholder="政策" v-model="homes.makeWay"》《/el-input》
《/el-form-item》
《/div》
《div》
《el-form-item label=""》
《el-button type="primary" @click="delateRebatePolicy(item.financialPolicy, indexHomes)" v-if="editStatus !== 3"》删除《/el-button》
《/el-form-item》
《/div》
《/div》
《el-button type="primary" style="margin-left: 10px;" @click="addRebatePolicy(index)" v-if="editStatus !== 3"》添加政策《/el-button》
《/div》
《/div》
《!-- 添加产品 --》
《el-button type="primary" style="margin: 20px 0px 30px 32px;" @click="addProduct()" v-if="editStatus !== 3"》添加产品《/el-button》
《div class="btn_submit" v-if="editStatus !== 3"》
《el-form-item》
《el-button type="primary" @click="onSubmit(ruleForm)"》确认保存《/el-button》
《el-button @click="closeLayers"》取消《/el-button》
《/el-form-item》
《/div》
《/el-form》
《/div》
《/div》
《/template》
《script》
export default {
data() {
return {
ruleForm: {
companyName: ’’, // 公司名称
financialProduct: [
// 产品数组
{
productName: ’’, // 产品名称
dockingPerson: [
// 对接人
{
dockingName: ’’, // 联系人
}
],
financialPolicy: [
// 返利政策
{
makeWay: ’’, // 计提条件
}
]
}
]
},
rules: {
companyName: [
{ required: true, message: ’请输入活动名称’, trigger: ’blur’ }
],
},
financialProductRules: {
productName: [
{ required: true, message: ’请输入产品名称’, trigger: ’blur’ }
]
},
dockingPerson: {
dockingName: [
{ required: true, message: ’请输入联系人姓名’, trigger: ’blur’ }
],
makeWay: [
{ required: true, message: ’请输入计提条件’, trigger: ’blur’ }
]
}
};
},
methods: {
onSubmit(formName) {
this.$refs.validate(valid =》 {
if (valid) {
console.log(this.ruleForm, ’提交的表单’);
} else {
return false;
}
});
},
},
};
《/script》
《style scoped lang="scss"》
《/style》
在HTML中加入javascript进行表单验证为什么不成功，没有出现验证提示
《!DOCTYPE HTML》
《html》
《head》
《meta charset="utf-8" /》
《title》加入验证的注册页面《/title》
《script type="text/javascript"》
function check(form1)
{
if (form1.password.value != form1.confirm.value)
{
alert("Password wrong");
form1.password.focus();
return false;
}
else if (form1.name.value == "")
{
alert("No name");
form1.name.focus();
return false;
}
else if (form1.email.value == "")
{
alert("No email");
form1.email.focus();
return false;
}
else if (form1.password.value.length 《 6)
{
alert("Password too short");
form1.password.focus();
return false;
}
else if (form1.email.value.indexOf(’@’) == -1 || form1.email.value.indexOf(’.’) == -1)
{
alert("email wrong");
form1.email.focus();
return false;
}
else
{
return true;
}
}
《/script》
《/head》
《body》
《form name=“form1” onsubmit="return check(this)"》
《p》注册信息《/p》
《p》
姓名：《input type="text" name="name" size="20" /》
《/p》
《p》
性别：《input type="radio" name="sex" value="男" /》男 《input type="radio"
name="sex" checked value="女" /》女
《/p》
《p》
职业：《select name="work" size="1"》
《option》教师《/option》
《option selected》学生《/option》
《option》职员《/option》
《/select》
《/p》
《p》
邮箱地址：《input type="text" name="email" size="20" /》
《p》
爱好：《input type="checkbox" name="hobby" value="旅游" /》旅游 《input
type="checkbox" name="hobby" value="游泳" checked /》游泳 《input
type="checkbox" name="hobby" value="游戏" /》游戏 《input type="checkbox"
name="hobby" value="上网" /》上网 《input type="checkbox" name="hobby"
value="羽毛球" /》羽毛球 《input type="checkbox" name="hobby" value="网球" /》网球
《/p》
《p》
密码： 《input type="password" name="password" size="20" /》
《/p》
《p》
确认密码：《input type="password" name="confirm" size="20" /》
《/p》
《p》自我描述：《/p》
《p》
《textarea name="ziwomiaoshu" rows="6" cols="20"》《/textarea》
《/p》
《p》
《input type="submit" value="提交" /》
《/p》
《/form》
《/body》
《/html》
更多文章：
springmvc的依赖（springMVC的注入方式有哪几种，这与springMVC依赖）
2026年9月7日 14:00
2026年9月7日 13:00
2026年9月7日 12:40
display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
2026年9月7日 11:00
2026年9月7日 10:50
timestamp without time zone（Postgresql中to_date（）函数使用问题）
2026年9月7日 09:40
2026年9月7日 04:20
下载mysql的步骤（win10安装mysql的步骤和方法）
2026年9月7日 04:10
2026年9月7日 03:50
2026年9月7日 03:40
