表单验证的必要性:
使用JavaScript可以十分便捷的进行表单验证,他不但能检查用户输入的无效或错误数据,还能检查用户遗漏的必选项,
从而减轻服务器端的压力,避免服务器端的信息出现错误。
客户端验证:
在已下载的页面中,当用户提交表单的时候,他直接在页面中调用脚本来进行验证,这样可以减少服务器端的运算。
服务器端验证:
将页面提交到服务器,由服务器端的程序对提交的表单进行验证,然后再返回响应结果到客户端。
验证表单的合法性:
1>首先获取表单元素的值,这些值一般都是String类型,包含数字,下划线等。
2>使用JavaScript中的一些方法对获取的String类型的数据进行判断。
3>表单form有一个事件onsubmit,他是在提交表单之前调用的,因此可以在提交表单时出发onsubmit事件,然后对获取的数据进行验证。
检验邮箱中是否含有@和.
function checkEmail(){
var flag=true;
var dom = $("[id=email]");
var value = dom.val();
if (value.indexOf("@")==-1) {
alert('邮箱中必须包含@');
flag = false;
}
if (value.indexOf(".") == -1) {
alert('邮箱中必须包含.');
flag = false;
}
return flag;
}
$(function () {
var myform = $("form");
myform.submit(function () {
return checkEmail();
});
});
换对焦后:
function checkEmail(num) {
var email = $("[id=email]").val().length;
if (email<6) {
$("#semail").text("邮箱不合格");
num = 1;
} else {
$("#semail").text("√");
}
return num;
}
function checkPwd(num) {
var pwd = $("[id=pwd]").val().length;
if (pwd<6) {
$("#spwd").text("密码不合格");
num = 1;
} else {
$("#spwd").text("√");
}
return num;
}
$(function () {
$("[id=email]").blur(function () {
checkEmail();
});
});
$(function () {
$("form").submit(function () {
var num1 = checkEmail(0);
var num2 = checkPwd(0);
var sum = num1 + num2;
if (sum > 0) {
return false;
}
return true;
});
});
事件:
onblur:失去焦点后,当光标离开某个文本框后时触发。
onfocus:获得焦点后,当光标进入文本框后时触发。
方法:
blur():从文本域移开焦点。
focus():在文本域中设置焦点,即获得鼠标光标。
select():选取文本域中的内容,突出显示输入区域的内容。
正则表达式:
正则表达式是一个描述字符模式的对象,他是由一些特殊的符号组成的,这些符号和在SQLServer中学过的通配符一样,其
组成的字符模式用来匹配各种表达式。
语法:
var reg=/表达式/附加参数
表达式:一个字符串代表了某种规则,其中可以使用某些特殊字符来代表特殊的规则。
附加参数:
g:代表可以进行全局匹配
i:代表不区分大小写匹配
m:代表可以进行多行分配
构造函数:
var reg=new RegExp(“表达式“,”附加参数”);
模式:
简单模式:通过普通字符的组合来表达的模式
符合模式:含有通配符来表达的模式
test()方法用于检测一个字符串是否匹配某个模式
语法:
正则表达式对象实例.test(字符串)
表单选择器:
用来选择文本输入框。
Jquery表单过滤选择器
表单对象属性过滤示例
选择器材 描述 返回 示例
:input 选取所有的,
:text 选取所有的单选文本框 集合元素 $(":text")选取所有的单选文本框
:password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
:radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框
:checkbox 选取所有的多选框 集合元素 $(":checkbox");选取所有的复选框
:submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
:image 选取所有的图像按钮 集合元素 $(":image");选取所有的图像按钮
:reset 选取所有的重置按钮 集合元素 $(":reset");选取所有的重置按钮
:button 选取所有的按钮 集合元素 $(":button"); 选取所有的按钮
:file 选取所有的上传域 集合元素 $(":hidden")选取所有不可见元素