jQuery表单校验
来源:互联网 发布:淘宝店铺等级怎么升级 编辑:程序博客网 时间:2024/06/06 18:23
使用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 选取所有的<input>,<textarea> 集合元素 $(":input")选取所有<input>,<textarea>.<select>和<button>元素
<select>和<button>元素
:text 选取所有的单选文本框 集合元素 $(":text")选取所有的单选文本框
:password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
:radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框
:checkbox 选取所有的多选框 集合元素 $(":checkbox");选取所有的复选框
:submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
:image 选取所有的图像按钮 集合元素 $(":image");选取所有的图像按钮
:reset 选取所有的重置按钮 集合元素 $(":reset");选取所有的重置按钮
:button 选取所有的按钮 集合元素 $(":button"); 选取所有的按钮
:file 选取所有的上传域 集合元素 $(":hidden")选取所有不可见元素
- jQuery表单校验
- jQuery formValidator表单校验
- jquery validate表单校验
- jQuery表单校验 Validation
- JQuery表单校验
- JQuery之表单校验
- Jquery 表单校验
- jQuery表单校验
- Jquery 表单校验
- jQuery表单校验
- jQuery/表单校验
- jquery表单校验插件
- jquery校验表单
- jquery校验表单
- JQuery -- Validate, Jquery 表单校验
- jQuery formValidator表单校验插件
- js jquery 常用表单校验
- JQuery插件:表单数据校验
- 最全的Java笔试题库之选择题篇-总共234道【1~60】
- jqurey第三章
- 使用HBuilder编辑器将html5页面打包成APP
- 表单校验 登录验证
- 解决ajax跨域问题
- jQuery表单校验
- 迟来半年的第一篇文章-初探VUE
- 字符串与数组
- Linux网络环境配置 (redhat)
- IDEA如何打包可运行jar,外部引用jar包版
- 面向对象的几个基本问题
- tomcat 假死现象(转)
- JAVA 快递查询接口API调用-快递鸟接口
- Hololens官方教程精简版 -配置篇