HTML中关于表单的提交和输入的值是否为空

文章出处：http://blog.csdn.net/lvhuiyang/article/details/53192277

//未填写的input 边框变红色
$('input[type=text]').each(function(i,v){
        $(v).blur(function(){
            if($(v).val() == ''){
                $(v).css('border-color','red');
                $(v).focus();
            }else{
                $(v).css('border-color', '#ece9e9');
            }
        })
    })

required 使用
<form action="" method="post" class="form1" enctype="multipart/form-data">
     <div class="tab_common">
      <span class="tab_common_span">队伍名称</span> 
<input type="text" class="tab_common_input" name="team_name" required placeholder="队伍名称" >

     </div>
 </form>

html的默认方式提交

<form  action="/server_url" method="post" id="form"><!--提交地址-->
    <input type="text" name="username" class="username" placeholder="请输入您的用户名！">
    <input type="password" name="password" class="password" placeholder="请输入您的用户密码！"> <input type="tel" name="telphone" class="tel" placeholder="请输入您的电话号码！">
    <input type="submit" class="submit_button" id="submit_button" value="登录">
    <button type="reset" class="reset_button">重置</button>
</form>

这一种提交方式无话可说，需要注意的是form标签内的 action属性负责提交的地址，method是提交的方式（get/post）。

2. 使用jquery进行控制

有时候我们需要对账号密码的输入进行控制，比如要判断输入框是否为空，为空的话进一步提醒用户。为了方便使用jQuery进行操作，如下：

$(document).ready(function () {
    $("#submit_button").click(function () {
        var username = $('.username').val();
        var password = $('.password').val();  var telphone = $('.tel').val();
        if (username == '') {
            alert("请输入账号");
            return false;
        }
        else {
            if (password == '') {
                alert("请输入密码");
                return false;
            }else   if (tel == '') {                    alert("请输入你的电话号码");                    return false;

   }

else $('#form').submit(); } }); });

注意一点就是如果不符合要求的话最后要返回false,不然弹出对话框之后还是会提交，关于这一点的原理之后再补，先挖坑。

3.使用ajax进行提交

同样使用jQuery，代码如下

$(document).ready(function () {
    $("#submit_button").click(function () {
         var username = $('.username').val();
          var password = $('.password').val();
          alert(username + ' \n' + password);
          $.post(
                                  '{{ url_for('main.login') }}',
                  {username: username, password: password},
                  function () {
                    window.location.href = 'http://www.baidu.com';});
    });

});

注意post方法的格式 $.post(url, data , callback())，使用flask时后端进行的重定向，但是前端页面并没有跳转，原因可能是ajax本身对于页面的控制，或者说ajax的特性并不能使页面进行跳转，解决方法是 callback()函数中可以设置对页面进行跳转。