<body>
<form class="registerform" action="formcheck.html">
<ul>
<li>
<label class="label"><span class="need">*</span> 中文名：</label>
<input type="text" value="" name="name" class="inputxt" />
</li>
<li>
<label class="label"><span class="need">*</span> 密码：</label>
<input type="password" value="" name="userpassword" class="inputxt" />
</li>
<li>
<label class="label"><span class="need">*</span> 确认密码：</label>
<input type="password" value="" name="userpassword2" class="inputxt" />
</li>
<li>
<label class="label"><span class="need">*</span> 所在城市：</label>
<select name="province" ><option value="">请选择城市</option><option value="1">瑞金市</option></select>
</li>
<li>
<label class="label"><span class="need">*</span> 性别：</label>
<input type="radio" value="1" name="gender" id="male" class="pr1" /><label for="male">男</label> <input type="radio" value="2" name="gender" id="female" class="pr1" /><label for="female">女</label>
</li>
<li>
<label class="label"><span class="need">*</span> 购物网：</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" /><label for="shoppingsite21">新蛋</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" /><label for="shoppingsite22">淘宝</label>
<input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox" value="3" /><label for="shoppingsite23">京东</label>
</li>
</ul>
<div class="action">
<input type="submit" value="提 交" /> <input type="reset" value="重 置" />
</div>
</form>
</body>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href="css/demo.css" type="text/css" rel="stylesheet" />
<style>
.registerform li{padding-bottom:20px;}
.Validform_checktip{margin-left:10px;}
.registerform .label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js">
</script>
<script type="text/javascript" src="js/Validform_v5.3.2_ncr_min.js"></script>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
var demo=$(".registerform").Validform({
tiptype:3,
label:".label",
showAllError:true,
datatype:{
"zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
},
ajaxPost:true
});
//通过$.Tipmsg扩展默认提示信息;
//$.Tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
demo.tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
demo.addRule([{
ele:".inputxt:eq(0)",
datatype:"zh2-4"
},
{
ele:".inputxt:eq(1)",
datatype:"*6-20"
},
{
ele:".inputxt:eq(2)",
datatype:"*6-20",
recheck:"userpassword"
},
{
ele:"select",
datatype:"*"
},
{
ele:":radio:first",
datatype:"*"
},
{
ele:":checkbox:first",
datatype:"*"
}]);
})
</script>
分享到：
相关推荐
jQuery Validation 插件是用于前端表单验证的强大工具，它能够帮助开发者轻松地实现各种复杂的验证规则，确保用户提交的数据符合预设的标准。这个插件不仅提供了丰富的验证方法，还支持自定义规则和消息，使其具有...
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果，同时也为表单验证提供了便利。本实例将深入探讨如何使用jQuery进行会员注册表单的验证。 首先，我们需要理解jQuery的基本用法。jQuery通过`...
jQuery-easyUI提供了一种便捷的方式来实现前端验证，特别是对于远程Ajax校验，使得我们可以实时检查用户输入的有效性，而无需立即提交表单。本文将详细介绍如何在jQuery-easyUI中进行远程Ajax验证，并讲解如何获取...
对于表单验证，jQuery Validation插件提供了强大的验证规则和错误提示。 总的来说，jQuery学习是提升网页开发效率的关键一步。掌握其基本用法和特效制作技巧，能让你在创建交互式和动态网页时更加得心应手。通过...
2）： 如果需要让某表单为必填项这需要添加属性“required="true"”，这样标题提示将会多出一个红星，并且未通过验证是不允许提交的，否则即使为空也可以提交； 3）：如果需要对某控件添加加验证，这需要添加属性...
Jquery练习表单验证 代码如下: <body> <form action=”” method=”post” id =”myform”> <table> <tr> 姓名：</td> <td><input type =”text” id = “name” name =”name”></td> </tr> <tr>...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。...在实际开发中，可以根据具体需求进行调整和扩展，实现更复杂的功能，如表单验证、数据保存等。
6. **插件生态**：jQuery拥有庞大的插件生态系统，涵盖了表单验证、图表绘制、轮播图、日期选择器等各种功能，极大地扩展了jQuery的功能范围。 7. **兼容性**：jQuery致力于浏览器兼容性，使得开发者无需关注不同...
例如，在用户提交表单时即时验证输入的有效性，或是在不刷新页面的情况下显示新的评论列表等。 总之，jQuery与Ajax的结合使用为前端开发带来了革命性的变化，极大地提高了开发效率和用户体验。无论是新手还是经验...
jxLib可能包括表格、对话框、按钮、表单验证等元素，提供了一套完整的前端解决方案。它可能与jQuery插件兼容，用于扩展jQuery的功能，或者作为独立的库来使用。 这些插件的使用需要一定的JavaScript和jQuery基础...
jQuery拥有庞大的插件生态系统，如`jQuery UI`提供了丰富的界面组件，`jQuery Validation`用于表单验证，`jQuery DataTables`实现表格分页和排序等。 五、实战案例 1. **导航菜单**：使用jQuery实现响应式导航菜单...
在这个登录注册界面，JQuery可能会被用来处理表单的提交事件，验证用户输入，显示或隐藏遮罩层，以及执行任何必要的动态效果，如表单验证反馈的动画。 `template`文件夹可能包含了一些CSS样式或者模板文件，这些...
9. 表单验证：jQuery可以方便地检测表单输入，通过`val()` 获取值，`hasClass()` 检查类名，以及正则表达式，实现简单的表单验证。 10. 扩展插件：jQuery生态系统中有大量插件，如jQuery UI（提供更丰富的UI组件）...
6. 示例项目：提供一些实际的ASP.NET应用示例，如用户登录注册、数据查询、表单验证等，展示jQuery和EasyUI在ASP.NET中的实际应用。 通过这个教程，开发者可以全面掌握ASP.NET、jQuery和EasyUI的综合运用，提升Web...
在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预期格式和规则，避免无效数据的提交，提高用户体验。jQuery Form Validate 是一个广泛使用的轻量级插件，它允许开发者以简洁的方式实现对HTML表单的...
- HTML部分创建了一个简单的表单，包含一个ID为`txtName`的文本框和一个ID为`result`的`div`，用于显示验证结果。 - CSS部分定义了`.txtName`类，当应用于文本框时，边框会变为红色。 - JavaScript部分使用jQuery的`...
jQuery提供了方便的方法来处理表单提交、验证和数据获取。例如，阻止表单默认提交行为并使用Ajax发送数据： ```javascript $("#myForm").submit(function(event) { event.preventDefault(); var formData = $...
案例可能包括但不限于：页面元素的淡入淡出效果、导航菜单的响应式设计、图片轮播、表格排序、表单验证、模态对话框等。通过实践这些案例，初学者可以逐步提升自己的jQuery技能，为日后的Web开发打下坚实基础。