表单验证

先来看看html部分

<form>

<div><span>姓名:</span><input type="text" name="name" placeholder="请输入您的姓名"></div>
<div><span>联系方式:</span><input type="text" name="tel" placeholder="请输入您的手机号"></div>
<div><span>参加人数:</span><input type="text" name="num" placeholder="请输入您的参加人数"></div>
<div>
<span>房间要求:</span>
<div class="boxDiv">
<input type="radio" name="room" id="big" value="大床房"><label for="big">大床房</label>
<input type="radio" name="room" id="biao" value="标间"><label for="biao">标间</label>
<input type="radio" name="room" id="tao" value="套房"><label for="tao">套房</label>
</div>
</div>
<div>
<span style="width:2.9rem">是否需要酒店提供早餐:</span>
<div class="boxDiv">
<input type="radio" name="breakfast" id="yes" value="是"><label for="yes">是</label>
<input type="radio" name="breakfast" id="no" valie="否"><label for="no">否</label>
</div>
</div>
<div>
<span style="width:2.9rem">参加板块选择(可多选):</span>
<div class="boxDiv">
<input type="checkbox" name="module" id="A" value="A"><label for="A">A</label>
<input type="checkbox" name="module" id="B" value="B"><label for="B">B</label>
<input type="checkbox" name="module" id="C" value="C"><label for="C">C</label>
</div>
</div>
<div>
<span>酒店选择:</span>
<select style="border:1px solid #ccc" name="hotel">
<option value ="">请选择酒店</option>
<option value ="万达皇冠假日酒店">万达皇冠假日酒店</option>
<option value ="万达文华度假酒店">万达文华度假酒店</option>
<option value ="敖麓谷雅酒店">敖麓谷雅酒店</option>
<option value ="哈尔滨凯宾斯基酒店">哈尔滨凯宾斯基酒店</option>
<option value ="香格里拉大酒店(松北)">香格里拉大酒店(松北)</option>
<option value ="凯莱花园大酒店">凯莱花园大酒店</option>
<option value ="马迭尔宾馆">马迭尔宾馆</option>
<option value ="香格里拉大酒店(道里)">香格里拉大酒店(道里)</option>
</select>
</div>

</form>

效果如：

         

再来看JS验证部分：

var name = $('[name="name"]').val(),
   tel = $('[name="tel"]').val(),
   num = $('[name="num"]').val(),
   room = $('[name="room"]:checked').val(),
   breakfast = $('[name="breakfast"]:checked').val(),
   hotel = $('select').val(),
   module = $("input:checkbox[name='module']:checked").val();
   if(name == ''){
    alert('请填写姓名!')
   }else if(tel == '' || !(/^1[34578]\d{9}$/.test(tel))){
    alert('请填写正确的手机号码!')
   }else if(num == '' || !(/^[0-9]*$/.test(num))){
    alert('请填写参加人数，如“1”!')
   }else if(room == null){
    alert('请选择房间类型!')
   }else if(breakfast == null){
    alert('请选择是否需要酒店提供早餐!')
   }else if(module == null){
    alert('请选择参加板块!')
   }else if(hotel == ''){
    alert('请选择酒店!')
   }else{
    alert(1)//你想执行的代码
   }