javascript表单末项回车调用验证函数

一般的快速注册表单都绑定了回车提交事件,一般用户在填写到表单最后一项时,会敲回车进行表单提交。

遇到一个问题就是末项的验证是鼠标离开事件时发生,这个时候当末项的输入不能通过验证,敲回来时,验证提示出不来。表单也没有提交出去,体验很差。

一个简单一点的解决方法,就是侦听末项的回车事件,调用blur事件的验证,去进行后续验证,提交表单操作。

代码如下:

	
        //注册确认密码验证
	$("#reg_repassword").bind("keyup",function(event){
		 if(event.keyCode==13){
    		$("#reg_repassword").blur();
    	}
	});

	$("#reg_repassword").bind("blur",function(){
		var cn = $("#reg_cn").val();
		var pwd = $("#reg_password").val();
		var pwd2 = $("#reg_repassword").val();
		var pwd2_tip = $("#reg .tips").eq(2);
		var pwd2_tipContent = $("#reg .tips").eq(2).find("span");
		var result = Verify.validatePwd(cn,pwd2,type[2]);
		var flag = (pwd == pwd2);
		if(result[0]){
			$(pwd2_tip).addClass('hidden');
		}else{
			$(pwd2_tip).removeClass('hidden');
			pwd2_tipContent.text(result[1]);
		}

		//判断是否存在后,如果值不相等,提示
		if (pwd && pwd2){
			var flag = (pwd != pwd2)
		}
		if(flag){
			$(pwd2_tip).removeClass('hidden');
			pwd2_tipContent.text(errTip.Msg['pwd_different']);
		}
	})

javascript表单验证小结

以下验证,在jQuery的环境之下~不得不言,自己的js水平委实很差,做东西的时候,感到吃力。也许这样,才有学习的动力吧。以下为脚本部分~主要实现了,表单提交时,检测表单项是否为空,如果为空,阻止提交,验证手机号,验证金额。

总结所遇到的问题:

1、阻止表单提交,没有验证的情况之下,点击”submit”提交,表单为直接提交。那么首先想到的是,在单击表单按钮的时候,进行判断,阻止表单提交。这个开始也遇到了一些问题,下面这种方法好一点。根据函数的返回值来确定表单是否提交。在函数中进行判断。

<form name=”regForm”  onsubmit=”return checkForm();” action=”#” method=”post”>

</form>

2、电话和手机号码验证,这个本是打算在提交验证函数中一并进行检验,但是调试失败,只能采用当文本框失去焦点时去判断。代码参考了网上的一段:

function checktel(tel)
{
var re=/((^0\d{1,4}(\-)?)?\d{4,8}$)|((\d{1,4}(\-)?\d{2,4}(\-)?)?\d{4,8}$)|((\d{1,4}(\-)?\d{2,4}(\-)?\d{2,4}(\-))?\d{4,8}$)/;
if( tel != “”) //判断是否为空值,不为空时判断
{
if(!re.test(tel))
{
alert(“电话号码无效,请核对。”);
document.getElementById(“phone”).value=””;
document.getElementById(“phone”).focus();
}
}
}

这一块,开始所做的时候,是当鼠标离开触发,没有考虑空值的时候,后来发现体验不太好,就增加了空值判断,如果文本框内容为空,暂不判断。

3、金额验证,主要包括空值及小数点验证。判断只能输入的数值必须为数字及小数点~首位不能为小数点~小数点后面保留两个小数。

function checknumber(money){
var re=/^\d+[.]?\d{1,2}$/;
if( money != “” )
{
if(!re.test(money)){
alert(“金额必须为数字,如有小数请保留两位!”);
document.getElementById(“money”).value=””;
document.getElementById(“money”).focus();
}
else if( money <= 0)
{
alert(“请核对金额!”);
document.getElementById(“money”).focus();
document.getElementById(“money”).value=””;
}
}
}

今天遇到一个问题金额验证输入一位整数后,移开光标出错。

修正如下:var re=/^\d+[.]?\d{0,2}$/; //文本框只能输入数字小数点和小数点后最多两位的JS方法,正则不好,不知道代表什么~~只是这样好使,以后要加强学习

这个在实现过程中,发现有一些是在输入的同时进行判断,或者文本框直接不能输入,有时还认为是自己的键盘不好使,感觉用户体验不太好。后来就使用这种方法来解决了,发现正则表达式很强大。

<script type=”text/javascript”>
////表单提交function checkForm() {
var name = $(“#name”).val();
var phone = $(“#phone”).val();
var money = $(“#money”).val();
if ( name == “”)
{
alert(“请填写用户名”);
$(“#name”).focus();
return false;
}
else if ( phone == “”)
{
alert(“请填写电话号码”);
$(“#phone”).focus();
return false;
}
else if ( money == “”)
{
alert(“请填写金额”);
$(“#money”).focus();
return false;
}
}
</script>

以上为空值验证,没有什么技术含量,看下就行了。

暂且总结到这里。

js 判断小数点

JS判断只能是数字和小数点

1.文本框只能输入数字代码(小数点也不能输入)
<input onkeyup=”this.value=this.value.replace(/\D/g,”)” onafterpaste=”this.value=this.value.replace(/\D/g,”)”>

2.只能输入数字,能输小数点.
<input onkeyup=”if(isNaN(value))execCommand(‘undo’)” onafterpaste=”if(isNaN(value))execCommand(‘undo’)”>
<input name=txt1 onchange=”if(/\D/.test(this.value)){alert(‘只能输入数字’);this.value=”;}”>

3.数字和小数点方法二
<input type=text t_value=”” o_value=”” onkeypress=”if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value” onkeyup=”if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value” onblur=”if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}”>

4.只能输入字母和汉字
<input onkeyup=”value=value.replace(/[\d]/g,”) “onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[\d]/g,”))” maxlength=10 name=”Numbers”>

5.只能输入英文字母和数字,不能输入中文
<input onkeyup=”value=value.replace(/[^\w\.\/]/ig,”)”>

6.只能输入数字和英文<font color=”Red”>chun</font>
<input onKeyUp=”value=value.replace(/[^\d|chun]/g,”)”>

7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress=”if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false”>

8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input onkeyup=”this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,’$1$2.$3′)”>

只能是数字和小数点和加减乘際

onkeypress=”return event.keyCode>=4&&event.keyCode<=57″