表单验证

<div style="border: 1px solid #000; width: 50%;">
			<p>编辑简介</p>
			<table style="border: 1px solid #000;">
				<tr><th>用户名：</th><td><input class="user" type="text" name="uSer"/></td></tr>
				
				<tr><th>*昵称：</th><td><input class="nc" type="text" name="uName"/></td>
					<th>实名</th><td> <input class="sm" type="text" name="uName"/>仅自己可见</td></tr>
				
					<tr><th>职位：</th><td><input class="zw" type="text" name="uJob"/></td>
					<th>性别：</th> <td ><input class="sexs" type="radio" name="sex" value="male" />男
					<input class="sexs" type="radio" name="sex" value="female" />女</td>
					
					<tr><th>生日：</th><td><input class="birth" type="text" name="uBirth"/></td>
					<th>行业：</th><td><input class="hy" type="text" name="uName"/>仅自己可见</td></tr>
					
					<tr>
						<th>个人简述</th>
						<td>
							<textarea class="sectch" name="" rows="5" cols="30"></textarea>
							<p class="change">您还可以输入<span></span>字符</p>
						</td>
					</tr>
			</table>
			
			<button>取消</button>
			<button class="sub">保存</button>
		
		</div>

 

<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
		</style>
		<script type="text/javascript">
			$(function(){
				$('.sub').click(function(){
					//用户名不为空
				 var consumer = $('.user').val();
				 if(consumer.length == 0){
				 	alert('用户名不能为空');
				 }
				var btn = $('.sexs:checked').val();
				var btns = $('.sexs:checked');
				if(btns.length == 0){
					alert('性别必须选择一项');
				}
				
				var births = $('.birth').val();
				if(births.length != 0){
					var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
					var mas = births.match(reg);
					if(mas == null){
						alert("请输入正确的格式");
					}
				}
				if(births.length == 0){
					alert("生日不能为空");
				}
				
				alert("用户名为："+consumer+"性别为："+btn+"生日为："+births+"");
				})
				
				 
				 $('.sectch').keyup(function(){
					var content = $('.sectch').val();
					if(content.length >300){
					alert('不能超过300个字哦');
				}
					var num = 300-content.length;
					var spans =  $('.sectch+p span');
					 spans.text(num);
				})
			})
		</script>
	</head>

//今天晚上把代码又重新做了一边，还存在一些问题。

<span>标签的获取还存在一些疑惑。特别是取到<span>标签之后，怎样去把span添加到<p>里面，并且实现每输入一个字，相对应的减少字数。

还忘记了，去取得当前键盘输入的值，就直接拿span添加到元素去了，然而，并没有起作用。

一、定义键盘按下并且移开，开始记数函数：keyup(sunction(){})取得当前键盘的值：用规定只能输入300个数字，减去<textarea class= "contont"></textarea>当前的长度：var num = 300-content.length;

二、将num，添加文本到span标签，实现计数功能。 spans.text(num);

三、正则表达式的表单验证:通过类样式获取生日的值，进行判断

if(births.lenght != 0){

//获取生日正则表达式：  var reg = /^(\d{4})-(\d{2})-(\d{2})$/;   (yyyy=ww-ll);

// 如果生日里面的值的长度不等于0 则执行 此正则样式  var mas = births.match(reg);

if（mas == null）{//如果不匹配此样式，则弹出警告框

alert("请输入正确格式");

}

四、字符串拼接 :alert("用户名为："+consumer+"性别为："+btn+"");//多个字符拼接外面用双引号，里面的变量也用双引号，同时把变量用左右两个加号拼接，加号外面用一对双引号。