一个表单的创建与验证

Posted 2020-10-16 李美玲

实例展示

样式

左边的span（设置宽度，display：inline-block，text-align：right）就可以右对齐了

js

页面的html布局
<li>
    <span class="textinfo">联系电话</span>
    <input type="" name="" value="" id="contentmobile" maxlength="11">
   <label for="" id="" class="contentmobile"></label>
</li>		    
正则校验电话的方法
function checkMobile(str) {
	var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[57])[0-9]{8}$/;
	if(str.match(reg)){
		return true;
	} else{
		return false;
	}
}

页面中调用的方法
  //申请的按钮
	   $(\'.btn\').click(function(){
	   		checkDatas();
	   });
		// 检查数据完整性
		function checkDatas(type) {
			// 检查手机号
			var contactTel = $(\'#contentmobile\').val().trim();
			var flag = true;
			if (contactTel == \'\' || contactTel == null || contactTel == undefined) {
				$(\'.contentmobile\').html(\'手机号不能为空\');
				flag = false;
				return flag;
			}

			if (!checkMobile(contactTel)) {
				$(\'.contentmobile\').html(\'请输入正确的手机格式\');
				flag = false;
				return flag;
			}
			return flag;
		}