超级简单的jquery表单验证

最新推荐文章于 2023-07-21 01:01:56 发布

最新推荐文章于 2023-07-21 01:01:56 发布 · 171 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的基本表单验证方法，包括检查表单字段是否为空及email地址格式是否正确。通过简单的HTML和jQuery脚本，可以快速实现有效的用户输入验证。

超级简单的jquery表单验证

验证表单内容是否填写，email格式是否正确

演示

   XML/HTML Code
  

   <div class="container">  
<form id="testform">  
<div class="field">  
<label for="full_name">Full Name</label>  
<input type="text" name="full_name" id="full_name" class="required">  
<div class="val-message">Please enter your first name</div>  
</div>  
<div class="field">  
<label for="web_address">Your Web Address</label>  
<input type="url" name="web_address" id="web_address" class="required">  
<div class="val-message">Please enter a valid URL</div>  
</div>  
<div class="field">  
<label for="email_address">Email Address</label>  
<input type="email" name="email_address" id="email_address" class="email">  
<div class="val-message">Please enter a valid email address</div>  
</div>  
<div class="field">  
<label for="your_message">Your Message</label>  
<textarea name="your_message" id="your_message" class="required"></textarea>  
<div class="val-message">Please enter a valid email address</div>  
</div>  
<button type="submit">Submit</button>  
<button type="reset">Clear</button>  
</form>  
</div>  

  