form表单各种元素值的获取及注意事项。

今天在写一个表单的时候，无意间就遇到了一个问题，就是明明用label标签把radio标签包起来了，也设置了对应的for和id，但不管我怎么点文字，就是不能选中。后来找了好久，才发现了问题的所在。也许是我水平太低，但对于初学者，这是个不得不注意这个问题。对于大牛，如果喜欢复制粘贴的，也要留心了。由于是用的bootStrap框架，所以我的页面代码是这样的。（为了节约篇幅，我这里就省去了不是关键的代码。）

<li class="active"><a href="#home" data-toggle="tab">添加站内导航</a></li>

<li><a href="#ios" data-toggle="tab">添加自定义链接</a></li>

</ul>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="type" id="type_0" value="middle" checked="true" >主导航

</label>

<input type="radio" name="type" id="type_1" value="top">顶部

</label>

<input type="radio" name="type" id="type_2" value="bottom">底部

</label>

</td>

</tr>

</table>

</form>

</div>

<tr>

</td>

</tr>

<tr>

<td>

<input type="radio" name="type" id="type_0" value="middle" checked="true" >主导航

</label>

<input type="radio" name="type" id="type_1" value="top">顶部

</label>

<input type="radio" name="type" id="type_2" value="bottom">底部

</label>

</td>

</tr>

</table>

</form>

</div>

很明显，这是一个可以切换的tab，但是两个tab里面都有类似这样的组合

<input type="radio" name="type" id="type_0" value="middle" checked="true" >主导航

</label>

当第一个tab显示时，很自然的点击文字，就可以选中radio。但切换到第二个label时，却不管用了，我以为是忘了给第二个tab里的元素加for或者id，但经过检查，也确实都加了。那问题出在哪呢，我突然想到了两个tab里面的input的id是一样的，于是把第二个里面的全改了，再次运行，耶，居然可以了。真是自己给自己挖了个坑啊，还好找出来了。

为什么呢，因为这两个tab虽然只有一个现实，但他们在同一个页面中，而在同一个页面中的元素，id必须是唯一的才行，如果有多个相同的Id，只会选中第一个元素，不信的可以亲自试一下。这个小问题就到此结束。

第二个注意点，当我们在为select，button，<input type=”button’>，<input type=”submin’>这些元素设置样式时，要记得它们的默认盒模型为border-box，所以我们在设置宽高时，记得把宽和高设置成width(height)+padding+border的值，否则会达不到你想要的效果。

另外，对于textarea在ie浏览器下的滚动条，我们可以通过加样式overflow-y:hidden来去掉，想要textarea的大小不可以拖动，可以添加样式resize:none，不要input框和textarea的选中的边框，可以加outline:none去掉。

下面来说一下form表单的取值问题，这方面的网上也很多，我只是把工作中做过的一个页面拿出来晒一下，就算是给自己忘了的时候留个查阅的地方。话不多说，直接上代码。

<span class="row-left">参赛项目名称:</span>

</div>

<span class="row-left">项目负责人姓名:</span>

</div>

<span class="row-left">身份证号码:</span>

</div>

</div>

</div>

</div>

</div>

</p>

</div>

</div>

</div>

</div>

</p>

</form>

页面部分截图如下：

QQ截图20160809113408

说一下我做这个页面的一些想法。

首先，从用户体验上，checkbox和radio元素必须加label，上面已经说过了，对于必须填写的输入项，我们用了placeholder提示，其次，对于这种有选择按钮的表单，我们要想到大部分人是什么人，然后让大部分人少操作，比如这里的人员类别，假设高校学生占比列多，我们就应该让高效学生项其默认选中。对于所在地域，也有更好的处理方式，我们都知道，身份证的前六位，就包括了你户籍所在地的信息，那么我们可以写一个Js，当用户输入完身份证或者身份证前六位的时候，就通过输入信息自动帮其填上，不对的用户自己会改，另一种情况，假设是某省某市某学校针对附近的所有学校学生举办了一个活动，我们可以知道，参赛的基本上都是某省某市的人，那么我们可以设置其为默认地址。

其次，代码书写上，因为要验证不为空的项比较多，在必填的选项是都加了一个required的样式，方便以一个统一的方式验证。Js代码如下：

$("#bmform .request").each(function(){

var $this = $(this);

$this.blur(function(){

if(!$this.val() || $this.val() == "请填写内容!"){

$this.addClass('red').val("请填写内容!");

}else{

$this.toggleClass("red",false);

}

});

功能就是当一个输入项失去焦点是，判断是否为空，如果为空，给予提示。这里的var $this=$(this)并不是必须的，直接用$(this)也可。

最后，当我们提交表单时，我们并不能保证每一输入项用户都获取过焦点，对于没有获取过焦点的输入项，自然不会触发blur事件，就不会报错，所以，提交数据之前，还得统一验证一次。如下：

if(!projectName){$projectName.addClass("red").focus();return;};

if(!personName){$personName.addClass("red").focus();return;};

if(!personId){$personId.addClass("red").focus();return;};

if(!personTel){$personTel.addClass("red").focus();return;};

if(!personInfoaddress){$personInfoaddress.addClass("red").focus();return;};

if(!painpoint){$painpoint.addClass("red").focus();return;};

if(!summary){$summary.addClass("red").focus();return;};

if(!remark){$remark.addClass("red").focus();return;};

对于没有内容的输入项，直接focus，让用户少去点击一次输入框。return可以阻止代码的继续执行，即当发现了有一项为空时，直接停止，不用再验证下面的是否为空，从性能上比不加return 更优。最后附上整个js代码。

$("#subbutton").click(function(){

var province = $("#province>option:selected").val(),//如果没设置value。则获取的是文本值

city = $("#city>option:selected").val(),

area = $("#area>option:selected").val(),

pca = province + city + area;

var nature = $("#bmform :input[name=nature]:checked").val();

//personClass: m.fn.init[3]//map()

//personClass: Array[3]//map().get(),所以选择这个

//personClass: "syry, tyjr, fxnm"//map().get().join(", ")

var personclass = $("#bmform :input[name=person-class]:checked").map(function(){return $(this).val();}).get();

var $projectName = $("#bmform :input[name=project-name]"),

$personName = $("#bmform :input[name=person-name]"),

$personId = $("#bmform :input[name=person-id]"),

$personTel = $("#bmform :input[name=person-tel]"),

$personInfoaddress = $("#bmform :input[name=person-infoaddress]"),

$painpoint = $("#bmform :input[name=painpoint]"),

$summary = $("#bmform :input[name=summary]"),

$remark = $("#bmform :input[name=remark]");

var projectName = $projectName.val(),

personName = $personName.val(),

personId = $personId.val(),

personTel = $personTel.val(),

personInfoaddress = $personInfoaddress.val(),

painpoint = $painpoint.val(),

summary = $summary.val(),

remark = $remark.val();

if(!projectName){$projectName.addClass("red").focus();return;};

if(!personName){$personName.addClass("red").focus();return;};

if(!personId){$personId.addClass("red").focus();return;};

if(!personTel){$personTel.addClass("red").focus();return;};

if(!personInfoaddress){$personInfoaddress.addClass("red").focus();return;};

if(!painpoint){$painpoint.addClass("red").focus();return;};

if(!summary){$summary.addClass("red").focus();return;};

if(!remark){$remark.addClass("red").focus();return;};

var infoJson = {

projectName :projectName,

personName :personName,

personId :personId,

personTel :personTel,

nature :nature,

personInfoaddress :personInfoaddress,

personClass :personclass,

pca :pca,

painpoint :painpoint,

summary :summary,

remark :remark

};

//console.log(infoJson);

$.ajax({

});

当然，这还有很多需要优化的地方，比如，我们可以获取一个值就判断一个值，当为空时，直接return，不在获取下面的值。与表单相关的还有很多很多，我这里就不一一讲述了。

(题外话，对于获取表单元素的值，Jquery还有个特别简单的方法，var str = $(“#formid”).serialize，它会自动的把表单的值拼接成一个字符串，我们直接用它提交到后台，在解析数据也可以，比如上面的表单，就能得到如下的值：project-name=12121&person-name=3224&person-id=45565748584658464559869&person-tel=12345678910&nature=team&person-infoaddress=%E6%B8%A9%E7%83%AD%E6%B1%A1%E6%9F%93%E7%89%A9%E5%A6%82&person-class=gxxs&person-address=&painpoint=34324&summary=123214214dfsfdsg&remark=dsfsfsdg，其中比较长的那种是值为中文的转码，是能反转为中文的。但这一做法你要保证每一项都写了name属性才行。开发中很少用到)

贵兴博客

form表单各种元素值的获取及注意事项。

相关文章

发表评论

发表评论