JS校验表单项

最新推荐文章于 2022-03-06 22:12:23 发布

东成熙就

最新推荐文章于 2022-03-06 22:12:23 发布

阅读量454

点赞数

分类专栏： Javascript 文章标签： JS校验表单

本文链接：https://blog.youkuaiyun.com/phpfer/article/details/48790475

版权

Javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript进行前端表单验证的方法，包括数字、邮箱、金额、IP地址和手机号码等常见格式的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<form>
<input type="text" id="isNum" οnkeyup="checkRate(this.id)" value=""/> (请输入数字)<br />

<input type="text" id="isEmail" value=""/> (请输入邮箱)<button οnclick="checkEmail(document.getElementById('isEmail').value)" >Check</button><br />

<input type="text" id="isMoney" value=""/> (请输入金额)<button οnclick="isMoney(document.getElementById('isMoney').value)" >Check</button><br />

<input type="text" id="isIP" value=""/> (请输入IP)<button οnclick="isIP(document.getElementById('isIP').value)" >Check</button><br />

<input type="text" id="isMobile" value=""/> (请输入手机号码)<button οnclick="checkMobile(document.getElementById('isMobile').value)" >Check</button><br />
</form>

<script type="text/javascript" language="javascript">
    /*
     * js判断数字
     */
    function checkRate(input){
	    //var re = /^[0-9]+.?[0-9]*$/;   	//判断字符串是否为数字，不能为负数. 如2，6，3.5，0.008
	    //var re = /^[1-9]+[0-9]*]*$/;   	//判断正整数(不含0)
	    //var re = /^[0-9]+[0-9]*]*$/;   	//判断正整数(含0)	  
	    //var re = /^(-)?[1-9]*$/; 			//负整数
	    var num = document.getElementById(input).value;
	    if (!re.test(num))
	    {
	        alert("请输入数字");
	        document.getElementById(input).value = "";
	        return false;
	    }
	}
	
    /*
     * js判断邮箱格式
     */
	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)) {
	        alert("您输入的Email地址格式不正确！");
	        return false;
	    }
	    else {
	    	alert('ok');
	        return true;
	    }
	};
	
   /*
    * js判断金额
    * 检查输入字符串是否符合金额格式,格式定义为带小数的正数，小数点后最多三位 （如：10.003;0.328）
    */
   function isMoney(s){
	    var regu = "^[0-9]+[\.][0-9]{0,3}$";
	    var re = new RegExp(regu);
	    if (re.test(s)) {
	    	alert('ok');
	        return true;
	    }
	    else {
	    	alert('请输入正确的金额');
	        return false;
	    }
	};
	
	/*
	 * js判断IP地址
	 */
	function isIP(strIP){
	    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) {
	            alert('ok');
	            return true;
	        }
	    }
	    alert("您输入的IP地址格式不正确！");
	    return false;
	};
	/*
	 * js判断手机号码
	 */
	function checkMobile(strMobile){
	    var regu = /^[1][0-9][0-9]{9}$/;
	    var re = new RegExp(regu);
	    if (re.test(strMobile)) {
	    	alert('ok');
	        return true;
	    }
	    else {
	    	alert('您输入的手机号码格式不正确！')
	        return false;
	    }
	};
</script>

Find more here: http://www.cnblogs.com/jay-xu33/archive/2010/08/18/1802536.html