form表单验证,form表单验证怎么写判断
怎么自己写form表单验证自定义规则
实现表单自定义验证消息，实际上很简单。大体思路为:
1、首先我们要设置表单的验证规则
2、然后根据表单的验证规则定义要显示验证消息，
3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。
下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：
!doctype html
html
head
meta charset="utf-8" /
titleForms: 验证提示/title
// 设置一些必要的样式，如验证消息的文字样式和控制验证消息显隐的样式
style
input:valid {
background: #fff;
}
input:invalid {
background: #fcc;
color: #333;
}
.validation-messages {
margin-bottom:15px;
}
.validation-messages span {
font-size:0.8em;
background-color:#eee;
padding:6px;
border:1px solid #ccc;
border-radius:10px;
color:#666;
}
//所有class属性为hide的元素都会被隐藏
.hide {
display:none;
}
/style
/head
body
article
h1Formsspan - 验证提示/span/h1
/article
div id="result-stub" class="well hidden"
form id="change-email-form" name="change-email-form"
fieldset
h4修改邮箱地址/h4
//设置表单应该遵循的验证规则。
//pattern 属性：规定用于验证输入字段的模式。
//maxlength 属性：规定输入字段的最大长度,以字符个数计。
//required属性：规定该input元素为必须的元素。
label用户名:/label
input type="text" name="username"
id="username" pattern="[a-zA-Z ]{5,}"
maxlength="30" required /
//设置表单的验证消息，并结合class属性样式将其隐藏起来
div
//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种
span data-rule="valueMissing"
class="hide"用户名不能为空./span
span data-rule="patternMismatch"
class="hide"必须是字母字符(长度应为5~30个字符)./span
/div
label邮箱地址:/label
//设置表单应该遵循的验证规则。
input type="email" name="email" id="email"
title="Email address is required" required /
//设置表单的验证消息，并结合class属性样式将其隐藏起来
div
span data-rule="valueMissing"
邮箱地址不能为空./span
span data-rule="typeMismatch"
邮箱格式不正确./span
/div
hr /
//设置两个按钮，作用分别是“清空表单内容和对表单中的内容进行验证
button type="submit" id="submit"
name="submit"修改/button
button type="button" id="checkValidation"
name="checkValidation"
class="btn"验证/button
/fieldset
/form
/div
script
window.onload= function() {
//---
// 创建一个验证规则容器。
var ruleNames = [];
// 填充验证规则容器.
// 寻找所有具有验证规则的元素，然后将该元素的data-rule属性值添加到验证规则数组中去。
$("[data-rule]").each(function(i, element) {
var ruleName = element.getAttribute('data-rule');
if ($.inArray(ruleName, ruleNames) 0) {
ruleNames.push(ruleName);
}
});
var
// 首先确定用户界面隐藏了所有验证消息。
// 然后在选定的表单上运行验证规则。
validate = function() {
$(".validation-messages span")
.addClass('hide');
document.getElementById('change-email-form')
.checkValidity();
},
// 查询每个输入的元素，以确定哪个元素无效。
// 一旦检测到无效元素，就遍历验证规则，找到无效的原因，然后通过消息对用户进行提示
validationFail = function(e) {
var
element = e.srcElement,
validity = element.validity;
if (!validity.valid) {
ruleNames.forEach(function(ruleName) {
checkRule(validity,
ruleName,
element);
});
e.preventDefault();
}
},
// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。
//如果这个验证规则返回ture，就表示无法通过验证，在表单中就会有相应的提示信息。
checkRule = function(state, ruleName, ele) {
if (state[ruleName]) {
$(ele).next()
.find('[data-rule="'
+ ruleName + '"]')
.removeClass('hide');
}
};
// 所有验证事件处理程序是附加在input元素上的而不是button元素
$(':input:not(:button)').each(function() {
this.oninvalid = validationFail;
this.onblur = validate;
});
$('#checkValidation').click(validate);
}
/script
script src="../js/jquery.js"/script
/body
/html
Element UI Form表单验证
Form组件提供表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。
rules中单个表单域校验规则可以包含多个数组，每个数组即是一条校验规则：
数组中的单个校验规则对象中包含required/message/trigger/min/max等参数。
表明要使用验证器的类型，类似于数据格式校验，使用这个，可以对一些特定的字段进行校验，不用像之前那样写正则了。
可识别的类型值有：
必填字段，即非空验证。
正则表达式，如果需要验证手机号码之类的，可以直接编写正则表达式配置道校验规则中，就不需要自己去校验了。
判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。
长度验证
枚举值验证
验证是否只有空格（如果没有该配置，则全空格的输入也是有效的）
有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此transform，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给原对象，以更改该属性的值。
如上，只有输入1、2、3的时候才能校验通过。
貌似这个只能辅助校验，并不能改变组件绑定变量本身的值。
深层规则，可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则，
为什么Form表单的自定义验证失效了
很多时候，需要对Yii表单model中的对象设置的rules进行判断，但是有的时候可能需要在提交之前就在客户端进行验证，我这边设置的方法是在提交按钮上设置监听器，如果部分内容为空（比如多选按钮没有选择），那么提示出错信息。主要目的是页面不用提交后刷新，进入controller的对应函数之后再判断出错。显示rules（）验证规则函数的错误信息。
这里为了验证是否选择某个单选按钮，对提交的按钮onclick设置监听，具体如下
Button onclick = "return fun()"/
自定义fun()函数，需要有return true和false两种情况
script function fun(){ var CheckBox = document.getElementsByName('checkBox[]');//获取所有的checkBox var count=0; for(i=0;i CheckBox.length;i++){ if(CheckBox[i].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') )); ?
前端form表单验证怎么做
HTML
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
/head
BODY
form action="" onsubmit="return toVaild()"
input type="text" id="ff"
input type="submit" id="submit" value ="提交"/
/form
/BODY
script language="javascript"
function toVaild(){
var val = document.getElementById("ff").value;
alert(val);
if(val == "可以提交"){
alert("校验成功，之后进行提交");
return true;
}
else{
alert("校验失败，不进行提交");
return false;
}
}
/script
/HTML
上面的网页中，只有在id="ff"的输入框中输入“可以提交”，才进行表单提交；否则不提交。