在项目开发的时候,我们经常要对用户传入数据库的表单数据进行验证,例如注册时候的账号密码,而验证分为前端验证与后端验证,能在前端完成的验证工作就不要让后端插手了。

本篇笔记以修改密码为例子,界面如下:

密码表单的 html代码,设置好id

<input id="userpass" name="user.password" value="#(user.password??)" required>

在同一个html文件下,添加jquery代码:

<script>
$(document).ready(function(){$("#save").click(function(){var str=document.getElementById("userpass").value;var res;if(/^(?![0-9a-zA-Z]+$)(?![a-zA-Z@#$%]+$)(?![0-9@#$%]+$)[0-9A-Za-z@#$%]{6,16}$/.test(str)==false){res="密码格式错误!"event.preventDefault(); //取消默认应答event.stopPropagation();//阻止冒泡到父元素}else{res="密码修改成功!"}alert(res);});
});
</script>

上面的代码是通过id得到用户输入的值,然后if、else判断是否符合正则表达式。对于不正确的数据,设置好要alert的信息,然后通过两个event事件取消submit,这样也就不会传入到数据库了,对于对的数据,直接设置要alert的信息即可。

希望能帮到你~

JQuery实现表单验证并使错误数据其无法提交到数据库相关推荐

  1. 整理的16个有用的jQuery Form(表单)验证教程

    表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...

  2. 基于jQuery的表单验证插件:jValidate

    网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...

  3. Jquery ValidateEngine表单验证

    Jquery ValidateEngine表单验证 用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...

  4. html中表单的校验的插件,功能强大的jquery.validate表单验证插件

    本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...

  5. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. JQuery实现表单验证(注册页面)

    注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位 验证邮箱符合规则,并且不能为空 重复密码要与密码一致 1.页面的样式 <form action="#&qu ...

  7. jQuery实现表单验证

    1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  8. JQuery.validationEngine表单验证插件

    一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...

  9. 基于 猫冬的 jQuery formValidator表单验证 的asp.net 控件

    为了方便在asp.net中使用,封装了一下 <猫冬 的 jQuery formValidator表单验证> 控件 其实也不是什么控件,只是一个类,方便生成前台js. 特点: 1.后台生成的 ...

  10. jquery 实现表单验证功能代码(简洁)

    html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...

最新文章

  1. 自动驾驶多目视觉感知
  2. 机器学习笔记:auto encoder
  3. 【译】Beyond Snarks: Some Blockchain Privacy Protocols You Need to Know About
  4. android Animator详解
  5. MySQL笔记(七)数据库三范式
  6. sklearn—特征工程
  7. linux下的C语言开发(多线程编程)
  8. 前端代码的整洁之道 | 技术头条
  9. 黄聪:WordPress动作钩子函数add_action()、do_action()源码解析
  10. python的解释器spython介绍
  11. LNMP源码安装教程
  12. 在苹果mac中使用excel时,如何快速求和多行数值?
  13. 会做饭的机器人曰记_会做饭的机器人作文二百字
  14. 人工智能是在数学计算机科学控制论信息论,ai人工智能需要学什么 人工智能对数学有何要求...
  15. CSS Sprite雪碧图的应用
  16. 记一次网站服务器搬迁实录
  17. Magento查询产品时查询库存状态
  18. 实验十六:电位器传感器实验
  19. 学习笔记0521----mysql管理
  20. 高程文件格式bil bip bsq tiff dem

热门文章

  1. OJ每日一练——输出元音字母
  2. [201011][Maven 实战][许晓斌][著]
  3. Python爬虫介绍
  4. 理解直播及其工作原理
  5. Windows域内密码凭证获取 (゚益゚メ) 渗透测试
  6. 关于软件测试未来发展趋势分析与总结
  7. 如何提高工作杠杆率?卖得更贵与卖出更多次
  8. stm32 iap升级
  9. 计算机光驱里有硬盘,笔记本电脑光驱位装机械硬盘有以下危害
  10. 最新区块链科普图书《区块链进化史》上市