2019-04-22
文本框验证
| 名 称 | 说 明 | |
|---|---|---|
| 属性 | value | 设置或获取文本框的值 |
| 方法 | focus( ) | 获得焦点 |
| select( ) | 选中文本内容 | |
| 事件 | onfocus | 光标进入某个文本框时 |
| onblur | 文本框失去焦点时 |
单选按钮验证
一组单选按钮(radio)存储在数组中，以共同name属性命名，访问不同的元素，必须通过数组下标。
<script type="text/javascript">
function check(){
var arr = document.getElementsByName("bloods");
for (var i = 0; i < arr.length; i++) {
if (arr[i].checked) {
…. ….
break;
}
}
}
</script>
复选框验证
下拉列表框开发
| 类别 | 名称 | 描述 |
|---|---|---|
| 方法 | add | 向下拉列表中添加一个列表项：add(new Option("text","value"),index) |
| remove | 根据索引删除一个列表项 | |
| 事件 | onchange | 当改变选定列表项时调用的事件 |
| 属性 | options[] | 返回包含下拉列表中的所有列表项的一个数组，数组中的每个元素都是 Option对象。可通过add方法添加Option对象。 Option对象有两个常用属性： text：设置或返回某个选项的纯文本值 value：设置或返回被送往服务器的值 |
| selectedIndex | 设置或返回下拉列表中被选列表项的索引号 | |
| length | 返回下拉列表中的列表项的数目 | |
| value | 返回下拉列表中选定的列表项的值 |
文本域开发
disabled：设置是否可用
readOnly：设置是否只读
表单提交验证
当用户完成表单信息输入，准备提交给服务器时会发生submit事件，submit事件可以进行表单提交前的最后的数据校验，并根据校验结果返回的布尔值，决定是否将数据提交给服务器。
在对submit事件进行调用的时候，一定要加上return语句，若返回false，则浏览器会阻止提交表单数据。
在实际应用中，经常会遇到根据用户填写内容的不同，将表单提交到不同的处理页。可以通过JS代码来设置表单的action属性，调用表单的submit() 方法实现自定义动态提交。
<body>
<script>
function fun1(){
var userName=document.getElementsByName("userName")[0].value;
var password=document.getElementsByName("password")[0].value;
// 返回true则提交，false不提交
if (userName==""||password==""){
alert("用户名或密码不能为空！");
return false;
}else{
return true;
}
}
</script>
<form id="form1" action="#" onsubmit="return fun1();"> //此处必须为 return fun1();方式调用
<p>用户名：<input type="text" name="userName" /></p>
<p>密 码：<input type="text" name="password" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<body>
<script>
function fun1(){
var userName=document.getElementsByName("userName")[0].value;
var password=document.getElementsByName("password")[0].value;
// 返回true则提交，false不提交
if (userName==""||password==""){
alert("用户名或密码不能为空！");
}else{
document.getElementById("form1").submit();//验证通过后调用表单的submit方法
}
}
</script>
<form id="form1" action="#" >
<p>用户名：<input type="text" name="userName" /></p>
<p>密 码：<input type="text" name="password" /></p>
<p><input type="submit" value="提交" onclick="fun1();"/></p>//若提交按钮为普通按钮
</form>
</body>
HTML5新增的客户端校验
在HTML4中，表单校验只能通过JavaScript实现。HTML5为表单控件增加了一些输入校验属性，通过简单的设置即可完成表单校验。
1.使用校验属性执行校验
HTML5为表单控件新增了如下几个校验属性：
required:指定该表单控件必须填写。其值必须是required或省略。required是所有的input标记共有的属性(但不包括type值为submit，button，reset的元素)
minlength和maxlength：是input标记的共有属性(如text、search、password、email、url、tel)。
pattern:指定该表单控件的值必须符合指定的正则表达式。其值必须是一个合法的正则表达式。pattern是所有的可输入的
input标记共有的属性，如text、search、password、email、url、tel。
min、max、step:只针对数值类型、日期类型的input元素，控制表单控件的值必须在min-max之间，并符合step步长。
2.调用checkValidity方法进行校验
每个表单元素都可以调用checkValidity方法，它返回一个布尔值，表示是否通过验证。默认情况下，表单的验证发生在表单提交时，如果使用 checkValidity() 方法，可以在需要的任何地方验证表单。
网友评论