`
tshebei
  • 浏览: 44227 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

利用JavaScript验证表单输入的格式

阅读更多
在页面验证里最常用到的Javascript,用于验证文本输入框或者其它控件输入字符串的格式,可以是验证ip地址、是否是字母或者数字(整数,小数)、手机号码、Email地址、日期等。

<script>

/*
用途:校验ip地址的格式
输入:strIP:ip地址
返回:如果通过验证返回true,否则返回false;

*/
function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式
if(re.test(strIP))
{
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
return false;
}

/*
用途:检查输入字符串是否为空或者全部都是空格
输入:str
返回:
如果全是空返回true,否则返回false
*/
function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}


/*
用途:检查输入对象的值是否符合整数格式
输入:str 输入的字符串
返回:如果通过验证返回true,否则返回false

*/
function isInteger( str ){
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}

/*
用途:检查输入手机号码是否正确
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false

*/
function checkMobile( s ){
var regu =/^[1][3][0-9]{9}$/;
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}


/*
用途:检查输入字符串是否符合正整数格式
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false

*/
function isNumber( s ){
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != -1) {
return true;
} else {
return false;
}
}

/*
用途:检查输入字符串是否是带小数的数字格式,可以是负数
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false

*/
function isDecimal( str ){
if(isInteger(str)) return true;
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
if (re.test(str)) {
if(RegExp.$1==0&&RegExp.$2==0) return false;
return true;
} else {
return false;
}
}

/*
用途:检查输入对象的值是否符合端口号格式
输入:str 输入的字符串
返回:如果通过验证返回true,否则返回false

*/
function isPort( str ){
return (isNumber(str) && str<65536);
}

/*
用途:检查输入对象的值是否符合E-Mail格式
输入:str 输入的字符串
返回:如果通过验证返回true,否则返回false

*/
function isEmail( str ){
var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test(str)) return true;
return false;
}

/*
用途:检查输入字符串是否符合金额格式
格式定义为带小数的正数,小数点后最多三位
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false

*/
function isMoney( s ){
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
}
/*
用途:检查输入字符串是否只由英文字母和数字和下划线组成
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false

*/
function isNumberOr_Letter( s ){//判断是否是数字或字母

var regu = "^[0-9a-zA-Z\_]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}
/*
用途:检查输入字符串是否只由英文字母和数字组成
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false

*/
function isNumberOrLetter( s ){//判断是否是数字或字母

var regu = "^[0-9a-zA-Z]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}
/*
用途:检查输入字符串是否只由汉字、字母、数字组成
输入:
value:字符串
返回:
如果通过验证返回true,否则返回false

*/
function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成

var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}else{
return false;
}
}

/*
用途:判断是否是日期
输入:date:日期;fmt:日期格式
返回:如果通过验证返回true,否则返回false
*/
function isDate( date, fmt ) {
if (fmt==null) fmt="yyyyMMdd";
var yIndex = fmt.indexOf("yyyy");
if(yIndex==-1) return false;
var year = date.substring(yIndex,yIndex+4);
var mIndex = fmt.indexOf("MM");
if(mIndex==-1) return false;
var month = date.substring(mIndex,mIndex+2);
var dIndex = fmt.indexOf("dd");
if(dIndex==-1) return false;
var day = date.substring(dIndex,dIndex+2);
if(!isNumber(year)||year>"2100" || year< "1900") return false;
if(!isNumber(month)||month>"12" || month< "01") return false;
if(day>getMaxDay(year,month) || day< "01") return false;
return true;
}

function getMaxDay(year,month) {
if(month==4||month==6||month==9||month==11)
return "30";
if(month==2)
if(year%4==0&&year%100!=0 || year%400==0)
return "29";
else
return "28";
return "31";
}

/*
用途:字符1是否以字符串2结束
输入:str1:字符串;str2:被包含的字符串
返回:如果通过验证返回true,否则返回false

*/
function isLastMatch(str1,str2)
{
var index = str1.lastIndexOf(str2);
if(str1.length==index+str2.length) return true;
return false;
}


/*
用途:字符1是否以字符串2开始
输入:str1:字符串;str2:被包含的字符串
返回:如果通过验证返回true,否则返回false

*/
function isFirstMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==0) return true;
return false;
}

/*
用途:字符1是包含字符串2
输入:str1:字符串;str2:被包含的字符串
返回:如果通过验证返回true,否则返回false

*/
function isMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}


/*
用途:检查输入的起止日期是否正确,规则为两个日期的格式正确,
且结束如期>=起始日期
输入:
startDate:起始日期,字符串
endDate:结束如期,字符串
返回:
如果通过验证返回true,否则返回false

*/
function checkTwoDate( startDate,endDate ) {
if( !isDate(startDate) ) {
alert("起始日期不正确!");
return false;
} else if( !isDate(endDate) ) {
alert("终止日期不正确!");
return false;
} else if( startDate > endDate ) {
alert("起始日期不能大于终止日期!");
return false;
}
return true;
}

/*
用途:检查输入的Email信箱格式是否正确
输入:
strEmail:字符串
返回:
如果通过验证返回true,否则返回false

*/
function checkEmail(strEmail) {
//var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if( emailReg.test(strEmail) ){
return true;
}else{
alert("您输入的Email地址格式不正确!");
return false;
}
}

/*
用途:检查输入的电话号码格式是否正确
输入:
strPhone:字符串
返回:
如果通过验证返回true,否则返回false

*/
function checkPhone( strPhone ) {
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "您输入的电话号码不正确!"
if( strPhone.length > 9 ) {
if( phoneRegWithArea.test(strPhone) ){
return true;
}else{
alert( prompt );
return false;
}
}else{
if( phoneRegNoArea.test( strPhone ) ){
return true;
}else{
alert( prompt );
return false;
}
}
}

</script>
<form name=a onsubmit="return checkPhone(document.a.b.value);">
<INPUT TYPE="text" NAME="b">
<input type="submit" name="Submit" value="check">
</form>
分享到:
评论

相关推荐

    基于JavaScript的表单验证.zip

    在表单验证中,JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为,然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素,再利用`value`属性获取...

    javascript表单验证方式一

    本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...

    javascript验证表单大全

    "JavaScript验证表单大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入表单数据的知识。在Web应用程序中,表单验证对于确保用户提交的数据符合预期格式和规则至关重要,从而避免无效数据的提交,...

    JavaScript日历代码,验证页面表单输入数据代码

    1. 表单事件:如onsubmit、onchange等,这些事件可以在用户提交表单或更改输入时触发验证。 2. 验证函数:编写函数来检查输入值的格式、长度、有效性,例如邮箱、电话号码、日期等。 3. 错误提示:当验证失败时,向...

    javascript特效 表单验证

    客户端验证是指在用户提交数据到服务器之前,利用JavaScript在用户浏览器上对输入的数据进行有效性检查,以提高用户体验和减轻服务器负担。本文将深入探讨JavaScript在表单验证中的应用、原理以及常见实践。 一、...

    javascript表单正则验证自定义提示

    JavaScript中的表单验证通常在`onsubmit`事件处理程序中进行,该处理程序会在用户尝试提交表单时触发。首先,我们可以遍历表单中的每个元素,然后针对每个需要验证的元素应用正则表达式。 例如,假设我们有一个要求...

    JavaScript客户端输入验证

    JavaScript客户端输入验证是Web开发中不可或缺的一环,它主要用于在用户提交数据到服务器之前检查数据的有效性和格式。这种验证可以防止无效数据的提交,减轻服务器的负担,提高用户体验,因为错误提示可以即时显示...

    javascript正则表达式表单验证大全

    ### JavaScript正则表达式在表单验证中的应用详解 在Web开发中,表单验证是确保数据质量和用户体验的重要环节。JavaScript正则表达式提供了一种强大的工具,用于前端数据校验,确保用户输入的数据格式正确无误。...

    表单设计Javascript工具

    3. **事件处理**:利用JavaScript的事件监听器,可以在用户与表单交互时执行特定操作,如点击按钮时提交表单或显示错误提示。 4. **表单提交**:JavaScript可以实现无刷新提交,通过AJAX技术将表单数据发送到服务器...

    使用JavaScript 完成表单的自动计算

    2. 限制输入:使用`pattern`属性或JavaScript验证输入格式,例如限制只能输入数字或特定范围的数值。 3. 提供清除功能:添加一个清除按钮,清空输入和计算结果。 4. 异步请求:当计算结果需要依赖服务器数据时,...

    javascript的表单验证

    本文将深入探讨"javascript的表单验证"这一主题,旨在提供一个全面的指南,帮助开发者掌握如何利用JavaScript有效地进行表单验证。 一、表单验证的重要性 表单验证是确保用户输入数据准确性和安全性的关键步骤。它...

    javascript万用表单验证

    1. **事件监听**:利用JavaScript的事件监听机制,如`onsubmit`、`onchange`等,可以在用户提交表单或更改输入时立即执行验证函数。 2. **正则表达式**:JavaScript支持正则表达式,可以用于创建复杂的模式匹配,以...

    javascript表单验证大全

    如果一致,提交表单。 除了以上案例,还有其他常见的验证技巧,如日期格式验证、电话号码验证、URL验证等,这些通常也需要利用正则表达式进行判断。在实际应用中,还可以使用AJAX进行异步验证,提供实时反馈,提升...

    JavaScript验证表单大全

    这段代码在用户尝试提交表单时被调用,如果文本区的字符数超过50,则返回`false`,阻止表单提交,并将焦点定位到该文本区。 ### 2. 字符类型过滤 字符类型过滤是确保用户输入符合预期的一种常见方法。例如: - **...

    javaScript实现的表单验证,省市级联

    正则表达式是JavaScript中进行字符串匹配和验证的强大工具,通过编写不同的正则模式,我们可以检查输入是否符合邮箱格式、电话号码格式、日期格式等各种规则。例如,验证邮箱格式的正则表达式可能是`/^\w+@[a-zA-Z_]...

    javascript表单验证器三方库.zip

    此库允许开发者定义各种验证规则,如非空、邮箱格式、电话号码等,以确保表单提交的数据符合预期。 `GitHub - calidion-node-form-validator- 可配置的表单验证器,支持递归数据。.url` 这个URL指向了该验证库的...

    JavaScript验证机制输入的测试工程

    在这个"JavaScript验证机制输入的测试工程"中,我们可以深入研究如何利用JavaScript实现各种常见的输入验证。 1. **基础概念**: - **JavaScript**:JavaScript是一种轻量级的解释型编程语言,广泛用于网页和网络...

    JavaScript表单验证

    JavaScript表单验证是Web开发中的一个关键环节,它主要用于确保用户在提交数据前输入的信息符合预设的格式和规则,从而提高数据质量和用户体验。在HTML表单中,我们经常使用JavaScript来实现动态验证,因为这种...

    JavaScript的表单验证

    - **客户端验证**:利用HTML5的内置属性(如`required`、`pattern`等)或者JavaScript来实现在用户提交表单前对数据进行初步检查。 - **服务器端验证**:即使进行了客户端验证,为了安全起见,还需要在服务器端再次...

Global site tag (gtag.js) - Google Analytics