本文使用的JavaScript多语言实现,请参考:http://dcao.iteye.com/blog/513944
总体效果如下图:
Step 1 指定输入框的类型和输入的范围。
字符串通过realType指定类型为字符串、option表示是否可选、minlength最小长度为2和 maxlength指定最大长度为20。
<input name="user" id="user" type="text"
realType="string" option="true" minlength="2" maxlength="20" >
数字通过realType指定类型为整型、min指定最小值为80、最大值为65535。
<input name="port" id="port" type="text"
realType="int" min="80" max="65535" maxlength="5" >
IP地址只要指定类型为ip就可以。
<input name="ip" id="ip" type="text" maxlength="15"
realType="ip">
等等类型...
Step 2 为每个类型写检查函数。
字符串的检查函数
function checkString(input)
{
if (undefined == input)
{
return true;
}
// 检查是否可选,默认可选,可选且内容为空就通过检查
if (input.option!=undefined &&
input.option=="true" &&
(input.value==""))
{
return true;
}
// 必选不能为空
if (input.value=="" )
{
return false;
}
// 检查最小长度
var minlen = parseInt(input.minLen, 10);
if((! isNaN(minlen)) && input.value.length < minlen )
{
return false;
}
// 检查最大长度
var maxlen= parseInt(input.maxLen, 10);
if((! isNaN(maxlen) )&& input.value.length > maxlen)
{
return false;
}
return true;
}
数字检查函数
function checkInt(input)
{
// 检查是否可选,默认可选,可选且内容为空就通过检查
if (input.option!=undefined &&
input.option=="true" &&
(input.value==""))
{
return true;
}
// 必选不能为空
if (input.value=="" )
{
return false;
}
// 和数字正则式比较
var intReg = /^-?\d+$/;
if(!input.value.match(intReg))
{
return false;
}
var value = parseInt(input.value, 10);
if(isNaN(value))
{
return false;
}
// 检查最小值
var min = parseInt(input.min, 10);
if((! isNaN(min)) && value < min )
{
return false;
}
// 检查最大值
var max= parseInt(input.max, 10);
if((! isNaN(max)) && value > max)
{
return false;
}
return true;
}
检查IP地址、email等的检查函数和上面的差不多,主要是采用正则式进行判断。
等等类型的检查函数...
Step 3 出错时增加错误提示
上面的检查函数都是返回true和false,还需要将错误信息提示给用户。
给用户提示的方式有 Alert对话框、控件边上显示错误信息、冒泡提示等。为了支持多种形式错误提示的切换,提示信息的实现通过将提示函数作为参数传入检查函数实现。
function checkString(input, errorFunction)
{
...
// 必选不能为空
if (input.value=="" )
{
errorFunction(can_not_empty);
return false;
}
...
// 检查最大长度
var maxlen= parseInt(input.maxLen, 10);
if((! isNaN(maxlen) )&& input.value.length > maxlen)
{
errorFunction(str_too_long.fillArgs(input.maxlength));
return false;
}
//从错误改到正确的时候错误提示要清除掉
errorFunction();
return true;
}
弹出错误对话框的函数
function alertError(input, msg)
{
if (msg == undefined)
{
return true;
}
alert(msg);
input.focus();
input.select();
return false;
}
function checkString(input, alertError) 效果如下图:
将错误显示到特定错误标签上的函数
function spanError(input, msg)
{
var name = "error" + input.id;
var span = document.getElementById(name);
if (span == undefined)
{
name = "error" + input.name;
span = document.getElementById(name);
if (span == undefined)
{
// 异常分支
alert("Need span:" + name);
return false;
}
}
if (msg== undefined)
{
span.innerHTML = "<img src='images/right.gif'/> "
}
else
{
span.innerHTML = "<img src='images/error.gif'/> " + msg;
}
return false;
}
要求没有控件有对应的错误标签
<input name="ip" id="ip" type="text" maxlength="15"
realType="ip">
<Span ID=erroruser></Span>
function checkString(input, spanError) 效果如下图:
Step 4 什么时候检查?
先写个帮助函数,作为所有类型控件的检查入口。
function checkInput(node, errorFunction)
{
if (node.realType == undefined)
{
return true;
}
if (errorFunction == undefined)
{
errorFunction = spanError;
}
var thisInputRight = true;
switch (node.realType)
{
case "int" :
if (!checkInt(node, errorFunction))
{
false;
}
break;
case "string" :
if (!checkString(node, errorFunction))
{
return false;
};
break;
case "ip" :
if (!checkIp(node, errorFunction))
{
return false;
};
break;
// .....
default :
alert("can't find realType: "+node.realType);
return false;
break;
}
}
控件失去焦点的是时候进行检查。
<input name="user" id="user" type="text"
realType="string" option="true" minlength="2" maxlength="20"
onblur="checkInput(this)"
>
表单提交的是很进行检查, 如果检查不通过就终止提交表单。
function checkForm(form, errorFunction)
{
if (errorFunction == undefined)
{
errorFunction = spanError;
}
var nodes = form.all;
var allRight = true;
var firstErrorInput = undefined;
for (var i=0;i<nodes.length;i++)
{
var node = nodes[i];
if (node.realType == undefined)
{
continue;
}
if (!checkInput(node))
{
allRight = false;
if (firstErrorInput == undefined)
{
firstErrorInput = node;
firstErrorInput.focus();
firstErrorInput.select();
}
}
}
return allRight;
}
onsubmit 函数返回失败的是时候就终止表单提交。
<form onsubmit = "return checkForm(this)">
...
</form>
- 大小: 4.6 KB
- 大小: 6.5 KB
- 大小: 29.6 KB
分享到:
相关推荐
邮箱校验正则表达式,及其jsp编写过程,JavaScript表单验证email邮箱,判断一个输入量是否为邮箱email,通过正则表达式实现。
本文实例为大家分享了用正则表达式的方式实现注册登入的校验,供大家参考,具体内容如下 表单验证: 1、用户名:6–18位数字,字母,下划线_,文本域获取焦点和失去焦点出现提示文字。 2、登入密码:请输入6–20位数字...
用于表单正则校验
JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现。 代码如下: //检查电话号码 function isTel(str){ var reg=/^([0-9]|[\-])+$/g ; if(str.length18){ return false; } else{ return...
正则表达式
正则验证html表单,设计html,css,js
简单的网页用户注册表单的校验,提供给大家学习,借鉴,完整代码已经打包,欢迎下载。截取一部分代码,如下: function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...
javascript实现仿京东注册表单,能够实现表单验证,正则匹配,表单验证追踪,随机验证码生成,密码强弱校验等功能。
与之匹配的正则表达式: (^\d{15}$)|(^\d{17}([0-9]|X)$) 下面以Javascript为例进行说明: functionisIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,...
html网页用户注册表单验证校验JavaScript源码代码,完整代码已经打包,还迎下载,代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
一个用于微信小程序的表单验证工具,用于快速表单校验,特点在于通过统一的form对象实现表单值规范管理,便于后期字段扩展,变量名维护。 引入方式 // pages/common/form.js const vobj = require("../../utils/...
JavaScript验证正则表达式大全,搜集最全的JavaScript验证正则表达式,开始查看吧,这里的都是正则表达式的例子
简单的js表单验证 <script type="text/javascript"> function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入...
目前收集整理了21个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IP地址、 十六进制颜色、 日期、 微信号、车牌号、中文正则等。表单...
我们已经发现了,在正则表达式中所有的字母字符和数字都是按照字面意思与自身相匹配的.JavaScript的正则表达式还通过以反斜杠(\)开头的转义序列支持某些非 字母字符.例如,序列 "\n" 在字符串中匹配的是一个直接量换...
代码如下:/* 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false; */ function isIP(strIP) { if (isNull(strIP)) return false; var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //...
在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来与表单对象交互,并进行校验。常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。根据一般的经验,如果表单中需要校验的...
JavaScript表单验证年龄 JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现。 //检查年龄 function isAge(str){ var mydate=new Date; var now=mydate.getFullYear(); if (str < ...
对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的...