jQuery Validation让验证变得如此容易(一)

最新推荐文章于 2019-11-12 18:15:03 发布

原创最新推荐文章于 2019-11-12 18:15:03 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #validation

jQuery插件专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用jQuery和jQuery Validation插件轻松实现表单验证，包括引入必要的JavaScript文件，创建HTML表单元素，并通过jQuery为表单找到验证入口。详细解释了如何在input元素中应用'class=required'来确保输入不为空，并展示了最终的验证运行效果及英文提示信息的修改方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、官网下载jquery，和jquery validation plugin http://jqueryvalidation.org/

二、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

三、接下来,声明下面的HTML片段

<form action="" id="jvForm">
	姓名:<input type="text" name="username" id="username" class="required" /></br>
	密码:<input type="password" name="password" id="password" class="required"/></br>
	<input type="submit" value="提交" />
</form>

通过以上代码，大家会发现我们对于每一个input都加上了class="required"

他的作用就是在这个inpute标签为空时会提示用户出错。

四、最后我们要为我们的框架找到一个切入点

<script type="text/javascript">
	$(function() {
		$("#jvForm").validate();
	})
</script>

运行效果如下

当然提示信息默认是英文的，可根据需要在jquery.validate.js里修改