简单的js表单验证框架
- /**
- * 通常在我们的HTML页面表单中有大量的数据验证工作,
- * 免不了要写很多验证表单的js代码,这是一项非常繁琐
- * 枯燥的工作。很多程序员也会经常遗漏这项工作。当然
- * 一些JavaEE框架中有一些比较好的验证框架提供给我们
- * 使用,但是也是需要很多繁琐的配置,页面查看起来也
- * 不是很方便。一般程序员使用的也不多。所以写了这一
- * 段JavaScript代码提供给大家使用。算是一个简单的
- * JavaScript验证框架吧。使用起来很简单,配合下面几
- * 种标签使用,能实现大多数表单验证。
- * 1.验证输入框类,包括,text,textarea,password,hidden等
- * <textValidate
- * field="username" //对应待验证的输入框name属性
- * lableText="用户名" //验证未通过时提示名称
- * altText="用户名必须是数字,字母,下划线,长度在5-10之间"
- * //验证未通过时的提示文字,可不设置,不设置该属性时使用lableText属性提示
- * isValidate="false" //是否验证
- * min="5" //最小长度
- * max="10" //最大长度
- * dataType="account"> //数据类型,可选值:string(字符串),
- * int(整数),email,account(只能是数字,字母,下划线),
- * phone(国内电话号码),postcode(国内邮政编码),code(国内身份证号码),
- * ip(电脑IP地址),正则表达式字符串
- * 2.验证单选和复选框是否必选,包括,radio,checkbox等
- * <radioValidate
- * field="sex"
- * altText=""
- * lableText="性别"
- * isValidate="false">
- * 3.验证下拉框是否必选,包括,select等
- * <selectValidate
- * field="city"
- * altText=""
- * lableText="所在城市"
- * isValidate="true"
- * noValue="-1"> //下拉框不选择时的默认值
- * Author:BluesLee <br>
- * CreateDate:2009-8-7 <br>
- * Modifier:BluesLee <br>
- * ModifyDate:2009-8-10 <br>
- * Version:1.0<br>
- * Copyright(c)2009 深蓝工作室<br>
- * All right reserved.<br>
- *
- */
- /**
- * 表单数据验证<br>
- * Author:BluesLee <br>
- * CreateDate:2009-8-7 <br>
- * Modifier:BluesLee <br>
- * ModifyDate:2009-8-10 <br>
- * Version:1.0<br>
- *
- * @param frm,待验证的表单对象
- * @return 验证通过返回true,验证失败返回false
- */
- function validate(frm){
- var textValidate=frm.getElementsByTagName("textValidate");
- for(var i=0;i<textValidate.length;i++){
- var isValidate=textValidate[i].getAttribute("isValidate");
- if(isValidate=="false") {
- continue;
- }
- var lable=textValidate[i].getAttribute("lableText");
- var min=textValidate[i].getAttribute("min");
- var max=textValidate[i].getAttribute("max");
- var datatype=textValidate[i].getAttribute("dataType");
- var alt=textValidate[i].getAttribute("altText");
- var field=document.getElementsByName(textValidate[i].getAttribute("field"))[0];
- if(min && min.length>0 && field.value.length<min){
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"不能小于"+min+"位!");
- }
- if(field.select)field.select();
- field.focus();
- return false;
- }
- if(max && max.length>0 && field.value.replace(/[^x00-xff]/g,"aa").length>max){
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"不能大于"+max+"位!");
- }
- if(field.select)field.select();
- field.focus();
- return false;
- }
- if(datatype && datatype.length>0){
- if(datatype=="int"){
- if(!/^[0-9]+$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"只能输入整数!");
- }
- return false;
- }
- }else if(datatype=="email"){
- if(!/^([a-zA-Z0-9_/-/./+]+)@((/[[0-9]{1,3}/.[0-9]{1,3}/.[0-9]{1,3}/.)|(([a-zA-Z0-9/-]+/.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(/]?)$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert("Email格式不正确!");
- }
- return false;
- }
- }else if(datatype=="account"){
- if(!/^[a-zA-Z0-9_]+$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"只能是数字,字母和下划线!");
- }
- return false;
- }
- }else if(datatype=="phone"){
- if(!/^d{3}-d{8}|d{4}-d{7}$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert("电话号码格式不正确,正确格式:0511-4405222 或 021-87888822");
- }
- return false;
- }
- }else if(datatype=="postcode"){
- if(!/^[1-9]d{5}(?!d)$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert("邮政编码不正确");
- }
- return false;
- }
- }else if(datatype=="code"){
- if(!/^d{15}|d{18}$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert("身份证号码不正确");
- }
- return false;
- }
- }else if(datatype=="ip"){
- if(!/^(((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))/.){3}((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/g.test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert("IP地址格式不正确");
- }
- return false;
- }
- }else{
- if(!new RegExp(datatype,"g").test(field.value)){
- if(field.select)field.select();
- field.focus();
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"输入格式不正确!");
- }
- return false;
- }
- }
- }
- }
- var radioValidate=frm.getElementsByTagName("radioValidate");
- for(var i=0;i<radioValidate.length;i++){
- var isValidate=radioValidate[i].getAttribute("isValidate");
- if(isValidate=="false") {
- continue;
- }
- var lable=radioValidate[i].getAttribute("lableText");
- var alt=textValidate[i].getAttribute("altText");
- var field=document.getElementsByName(radioValidate[i].getAttribute("field"));
- var flag=true;
- for(var j=0;j<field.length;j++){
- if(field[j].checked){
- flag=false;
- break;
- }
- }
- if(flag){
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"为必选项!");
- }
- return false;
- }
- }
- var selectValidate=frm.getElementsByTagName("selectValidate");
- for(var i=0;i<selectValidate.length;i++){
- var isValidate=selectValidate[i].getAttribute("isValidate");
- if(isValidate=="false") {
- continue;
- }
- var lable=selectValidate[i].getAttribute("lableText");
- var alt=textValidate[i].getAttribute("altText");
- var noValue=selectValidate[i].getAttribute("noValue");
- var field=document.getElementsByName(selectValidate[i].getAttribute("field"))[0];
- if(field.value==noValue){
- if(alt && alt.length>0){
- alert(alt);
- }else{
- alert(lable+"为必选项!");
- }
- return false;
- }
- }
- return true;
- }
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> New Document </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- <META NAME="Author" CONTENT="">
- <META NAME="Keywords" CONTENT="">
- <META NAME="Description" CONTENT="">
- <mce:script language="JavaScript" src="validate.js" mce_src="validate.js"></mce:script>
- </HEAD>
- <BODY>
- <form onsubmit="return validate(this);">
- <textValidate field="username" lableText="用户名" isValidate="false" min="5" max="10" dataType="account">
- 用户名
- <input name="username" type="text"><br>
- <textValidate field="password" lableText="密码" isValidate="false" min="6" dataType="^[a-zA-Z0-9_]+$">
- 密码
- <input name="password" type="password"><br>
- <textValidate field="email" lableText="Email" isValidate="false" dataType="email">
- <input name="email" type="text"><br>
- <radioValidate field="sex" lableText="性别" isValidate="true">
- 性别
- <input name="sex" type="radio">男
- <input name="sex" type="radio">女<br>
- <radioValidate field="hunyin" lableText="婚姻状况" isValidate="true">
- 婚姻状况
- <input name="hunyin" type="radio">已婚
- <input name="hunyin" type="radio">未婚<br>
- 兴趣爱好
- <radioValidate field="love" lableText="兴趣爱好" isValidate="true">
- <input name="love" type="checkbox">篮球
- <input name="love" type="checkbox">足球<br>
- 所在城市
- <selectValidate field="city" lableText="所在城市" isValidate="true" noValue="-1">
- <select name="city">
- <option value="-1">请选择...</option>
- <option value="上海">上海</option>
- <option value="北京">北京</option>
- <option value="西安">西安</option>
- </select>
- <input type="submit">
- </form>
- </BODY>
- </HTML>
简单的js表单验证框架的更多相关文章
- 一个自己实现的js表单验证框架。
经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求.最 ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- ValidationSugar表单验证框架-支持ASP.NET MVC ASP.NET WebFroM
ValidationSugar表单验证框架的优点: 1.支持javascript端和后端的双重验证 (前端目前依赖于jquery.validate.js,也可以自已扩展) 2.代码简洁 3.调用方便 ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- [JavaWeb基础] 015.Struts2 表单验证框架
在web开发的过程中,我们经常要用到一些填写表单的操作,我们一般都要在提交表单信息的时候对表单的内容进行验证,struts2给我们提供了简单的实现接口,让我们可以很容易的对表单进行验证.下面讲解下最传 ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
随机推荐
- 为图片添加文字 canvas
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- HttpClient 简介与使用
Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的 URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而 ...
- 【CDockablePane】关于CDockablePane
1.DockPane是CFrameWndEx框架窗口的函数,不能用于基于对话框的应用程序,也不能用于老版本VC,只能用于基于单文档和多文档的应用程序. 2.最佳变通实现办法:创建CFormView基类 ...
- input上报流程分析【转】
转自:http://blog.chinaunix.net/uid-28320320-id-3389196.html .参考文章 [Andorid]input系统的事件处理 .源码分析 linux )查 ...
- 属性动画详解一(Property Animation)
效果图: Android动画有3类: 1.View Animation (Tween Animation) 2.Drawable Animation (Frame Animation) 2.Prope ...
- springBoot 环境
环境约束 jdk1.8:Spring Boot 推荐jdk1.7及以上:maven3.x:maven 3.3以上版本:Apache Maven 3.3.9.IntelliJIDEA2017:Intel ...
- Android Studio 打开后无故爆红后解决办法
今天打开AndroidSutudio后表示一脸蒙蔽,项目无故爆红,我本以为是哪里的代码有错导致 报错,于是乎逐个检查,但是并没有发现任何问题,然后CelarProduct,ReBuildProduct ...
- Ruby 定时任务之一(初步尝试)
最近工作需要用到定时任务.原来写java的时候也用到过类似的Scheduler的功能. Ruby语言中也有同样功能的工具.rufus-scheduler.下面介绍一下rufus-scheduler. ...
- ios notification
apps can use local or push notifications to let people know when interesting things happen, such as: ...
- Android 控件架构与自定义控件详解
架构: PhoneWindow 将一个 DecorView 设置为整个应用窗口的根 View,这里面所有 View 的监听事件,都通过 WindowManagerService 来接收.DecorVi ...