表单验证必填项

Posted 灯火阑珊hy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单验证必填项相关的知识,希望对你有一定的参考价值。

在表单验证中,会有一些必填项,如手机号,密码,昵称,验证码等,如果某项为空,或格式不正确表单将无法提交。在此我只做了手机号和密码的验证,其他的与此类此

html代码:

            <form action="" onsubmit="return check_sub()">
			<p class="tel">
				<label for="tel">手机</label>
				<input type="text" id="tel" onblur="yt_tel()">
				<span>手机格式不正确</span>
			</p>
			<p class="psd">
				<label for="psd">密码</label>
				<input type="password" id="psd" onblur="yt_psd()">
				<span>密码格式不正确</span>
			</p>
			<p>
				<input type="submit" id="sub">
			</p>

		</form>        

  js代码

	<script type="text/javascript">
		function check_sub(){
			var check=yt_tel()&&yt_psd();
			if(!check){
				return false;
				console.log(‘false‘);
			}else{
				return true;
			}
		}
		//验证手机号
		var regTel=/(1[3-9]\d{9}$)/;
		
		function yt_tel(){
			var tel=$(‘#tel‘).val();
			if (!regTel.test(tel)) {
				$(‘.tel span‘).show();
				return false;
			}else{
				return true;

			}
		}
		//验证密码
		var regPsd=/^[_a-zA_Z0-9]{6,12}/;
		function yt_psd(){
			var psd=$(‘#psd‘).val();

			if (!regPsd.test(psd)) {
				$(‘.psd span‘).show();
				return false;
			}else{
			return true;
			}
		}

	$(‘#tel‘).focus(function(){
		$(‘.tel span‘).hide();
	});
	$(‘#psd‘).focus(function(){
		$(‘.psd span‘).hide();
	});
		
	</script>

  

以上是关于表单验证必填项的主要内容,如果未能解决你的问题,请参考以下文章

vue表单必填项前面添加红色*

layui自带验证体系:手机号验证邮箱验证必填项非空验证数字验证(含代码案例)

Layui layui表单必填项带*样式

#yyds干货盘点 React工作记录十一控制ant design中form的必填项判断

Django,模型和表单:替换“此字段为必填项”消息

表单验证如何定位到未填的选项