<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+"");//多个字符拼接外面用双引号,里面的变量也用双引号,同时把变量用左右两个加号拼接,加号外面用一对双引号。