`

js校验(勉强算是个jquery插件,支持ajax异步校验,按钮提交,自定义正则)

阅读更多

JE上搜索js校验插件一搜一大把,大部分做的都不错,不过总是感觉用着达到自己想要的结果,于是乎,就自己搞了个,但是严格来说这并不算一个jquery插件(没有按照jquery插件定义的格式来写,因为原本是打算用元素js代码写的,后来考虑代码的维护性和简洁性采用了jquery)
由于本人技术有限,这个只是个demo,欢迎各位进一步完善(代码中注释很完善)
废话不多说,以下是这个插件的说明:

插件大小:6K(js)+1k(css)=7kb
1.无需书写js,只需要导入jquery.js和本js即可
2.常规校验采用 <input jType="" jSize='min,[max]' jErr=''/>的形式,

其中jType为定义好的校验类型,
有可选参数 english,china,email,id,number,type1
jSize为配置输入的最大和最少参数,若jSize不写则默认输入长度了1~max
jErr为自定义错误输出,不配置该属性则会启用默认输出
3.自定义正则校验
<input type="text" jUser="正则表达式" JErr="自定义错误输出" />

 4.ajax校验

<input type="text" jAjax="URL" name='name' jErr="自定义错误输出" />

后台返回字符串'true'或'false',true表示校验成功,false表示校验失败,其中URL不要带以本元素name命名的参数

<input type="text" jAjax="testAction.do" name='username' jErr="异步校验失败" />

 后台核心代码

String name =request.getParameter("username");
		if(name.equals("admin")){
	
				response.getWriter().write("true");
			
		}else{
			response.getWriter().write("false");
		}
		System.out.println("name="+name);

 5.通过submit按钮提交的时候,若有校验没通过,则表单无法提交

6.如果通过按钮提交表单,续加入属性 jForm="true"

然后再js中进行引入 var check =checkFormJs();

if(check==false){

//表单校验未通过

}else{

//校验通过,自己书写提交表单代码

}

7.更多例子请参加附件

分享到:
评论

相关推荐

    jquery的ajax校验.zip

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax校验,这是一种在客户端进行数据验证的技术,它能够提高用户体验,减少不必要的服务器...

    ajax校验

    在Spring MVC框架中,Ajax(Asynchronous JavaScript and XML)验证是一种常见的前端与后端交互方式,用于实现实时、无刷新的数据验证。这种方式可以提高用户体验,因为在用户提交表单前就能得知输入数据是否符合...

    校验码js的使用

    - **AJAX异步验证**:在用户输入时,通过发送Ajax请求到服务器,验证用户输入的有效性,如检查用户名是否已存在。 总的来说,js的校验码使用在Web开发中扮演着至关重要的角色,它可以增强安全性,提供更好的用户...

    jqeury 插件 校验

    在"jQuery 插件 校验"这个主题中,我们主要关注的是如何使用jQuery来开发和应用验证插件,以确保用户输入的数据符合预设的规则和格式。 在Web开发中,数据校验是一个至关重要的环节,特别是在表单提交时,以防止...

    jQuery validate插件实现ajax验证重复的2种方法

    该插件支持自定义验证规则,因此可以灵活地满足各种验证需求。使用jQuery Validate时,往往需要与AJAX技术结合使用,以便在客户端校验的基础上,将数据发送到服务器端进行进一步的校验。 在本实例中,jQuery ...

    使用AJAX(包含正则表达式)验证用户登录的步骤

    AJAX异步提交** 当用户点击提交按钮时,我们使用jQuery库中的`$.ajax()`方法发送POST请求到服务器。这个方法包含了请求类型、URL、数据和预期的响应类型。 ```javascript $(function() { $(":button").on("click...

    jq 表单校验工具

    "jq 表单校验工具"是一个专门用于JavaScript(js)和jQuery(jq)环境的插件,它提供了强大的功能来帮助开发者实现对表单输入的实时验证。 首先,我们来看一下这个工具的核心功能。"传参"意味着你可以向校验方法...

    JS校验脚本

    在实际项目中,我们还需要考虑如何处理验证失败的情况,通常会通过显示错误信息提示用户,或者使用AJAX异步提交数据时在服务端再次进行验证,以增加安全性。 总之,JS校验脚本是前端开发中不可或缺的一部分,它涉及...

    Jquery超强验证表单

    综上所述,“jQuery超强验证表单”涉及的知识点涵盖了jQuery基础、表单验证原理、验证插件使用、自定义规则和错误消息、实时验证、AJAX提交以及错误处理等方面。掌握这些内容,可以提升你在Web开发中处理表单验证的...

    绝对好用的jquery表单全自动验证插件

    本人自己开发的jquery表单验证控件! 使用方便,样式美观,完全开源。...btnsubmit:可选 指定一个绑定提交事件的控件ID,如一个普通按钮或一个超链接,表单中的submit依然有效 其它具体使用方法,请参阅demo文件!

    Jquery基础实例01——用户名校验

    **jQuery基础实例01——用户名校验** 在Web开发中,客户端验证是必不可少的一部分,它能够提高用户体验,减少无效请求...在后续的实例中,我们可以探索更多关于jQuery的功能,如Ajax异步通信、动画效果和插件使用等。

    jQuery form插件之formDdata参数校验表单及验证后提交

    这里我们使用`ajaxForm`方法来创建一个异步表单提交,并设定`beforeSubmit`回调函数,该函数会在表单提交前被调用,用于数据校验。例如: ```javascript $(document).ready(function() { $('#myForm').ajaxForm({ ...

    全面的js表单验证包含正则表达式还有本人写的表单验证

    虽然这个资源包可能专注于纯JS验证,但实际开发中,开发者可能会使用jQuery的`.validate()`插件或Vue.js的内置指令(v-model和v-validate)来简化表单验证流程。 七、实践与学习 对于初学者来说,这个资源包提供了...

    jquery插件ajaxupload实现文件上传操作

    jQuery插件ajaxupload是用于实现文件上传功能的一个工具,它可以在客户端通过JavaScript异步地上传文件到服务器。在本文中,将详细介绍如何利用ajaxupload插件实现文件上传操作,并提供相应的代码示例和截图说明,...

    页面特效JavaScript校验等

    除此之外,JavaScript还可以用于实现更复杂的交互,比如AJAX异步请求,它可以在不刷新整个页面的情况下更新部分网页内容,提升用户交互体验。此外,随着前端技术的发展,JavaScript框架如React、Vue和Angular也提供...

    jQuery.validationEngine 表单验证中文版

    jQuery.validationEngine是一款强大的JavaScript插件,专用于前端表单验证。这款插件以其简洁的API、丰富的验证规则和良好的国际化支持而备受青睐。在中文环境中,它可以为用户提供友好的中文提示,确保用户输入的...

    邮箱jQuery验证

    综上所述,“邮箱jQuery验证”涉及的主要知识点包括jQuery事件处理、正则表达式验证、AJAX异步请求、JSON数据解析以及前端UI交互的优化。通过合理运用这些技术,我们可以构建出高效、友好的邮箱输入验证和自动填充...

    jQuery插件form-validation-engine正则表达式操作示例

    总结起来,jQuery插件form-validation-engine是一个功能强大的表单验证解决方案,它通过正则表达式和异步验证提供灵活的数据校验。通过深入理解和熟练运用,你可以创建出具有严格数据验证机制的高效表单,从而提高...

    javascript实现常用的表单前台数据的校验

    这时可以使用Ajax异步请求: ```javascript function asyncValidateUsername(username, callback) { $.ajax({ url: "/api/check_username", data: { username: username }, success: function(response) { ...

    jQuery输入手机号码获取验证码表单代码

    8. **Ajax通信**:在用户点击获取验证码或提交表单时,可以通过Ajax异步请求将数据发送到服务器,这样不会刷新整个页面,保持用户交互的流畅性。 9. **CSS样式**:提供的`css`目录下的文件用于设置页面样式,包括...

Global site tag (gtag.js) - Google Analytics