javascript面向对象思想做form表单验证 代码很精简哦

<html>

<head>

<meta charset=utf-8 />

<!--引入jQuery-->

<!--coder:[email protected] 孙亚龙--->

<script src="jquery-1.7.2.min.js"></script>

<script>

var obj = {

res : true ,

nick_fun : function(o,tip){

if(this.res==true){

o.siblings("span").css("color","blue");

}else{

o.siblings("span").css("color","red");

}

o.siblings("span").html(tip);

}

}

$(function(){

var regex  = new RegExp("^([\u4E00-\uFA29]){1,10}$");

var regmob = /(1[3458]\d{9},)*1[3458]\d{9}/g;

var regem  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

$(".name").blur(function(){

var v = $(this).val();

var re = regex.test(v);

obj.res = re;

re==true ? obj.nick_fun($(this),"姓名输入正确!") : obj.nick_fun($(this),"姓名为汉字!");

})

$(".email").blur(function(){

var v = $(this).val();

var re = regem.test(v);

obj.res = re;

re==true ? obj.nick_fun($(this),"邮箱输入正确!") : obj.nick_fun($(this),"邮箱输入格式不正确!");

})

$(".mobile").blur(function(){

var v = $(this).val();

var re = regmob.test(v);

obj.res = re;

re==true ? obj.nick_fun($(this),"手机号输入正确!") : obj.nick_fun($(this),"手机号输入有误!");

})

})

</script>

</head>

<body>

<form>

<div>姓名:<input type=‘text‘ name="name" class="name" /><span></span></div>

<div>邮箱:<input type=‘text‘ name="email" class="email" /><span></span></div>

<div>手机号:<input type=‘text‘ name="mobile" class="mobile" /><span></span></div>

<input type="button" value="点击" id="ck" />

</form>

</body>

</html>

时间: 2024-10-25 17:30:56

javascript面向对象思想做form表单验证 代码很精简哦的相关文章

iview中Modal弹窗做form表单验证相关问题

在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 如果报错 validate 未定义的话,需要看一下点击事件内容引号是否正确 原文地址:https://www.cnblogs.com/xu-nian-qin/p/10824736.html

用jquery写自己的form表单验证

这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路:   1.<input type="text" Validate="Date" id="date"/>这里的 Validate:是我们需要验证的类型(属于日期类型),这里你也可以自己定义.id属性就不用说了.<input type=

抽屉之Tornado实战(7)--form表单验证

在这里,我们把form表单验证的代码进行工具化了,以后稍微修改一下参数就可以拿来用了 先贴上代码 forms.py from backend.form import fields class BaseForm: def __init__(self): self._value_dict = {} self._error_dict = {} self._valid_status = True def valid(self, handler): for field_name, field_obj in

element-ui Form表单验证

element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末 1. 普通输入验证 <el-form-item label="活动名称" prop="name"> <!-- validate-event属性

python_way day14 HTML-day5 (form表单验证,)

python-way day19 1. dJango的form表单验证 一,django表单验证功能 1.django验证基础: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>django form</title> </head> <body> <div> <i

django之form表单验证

django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf-8 -*- import re from django import forms from django.core.exceptions import ValidationError def mobile_validate(value): mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]

Python自动化运维系列之Django Form表单验证

Form表单验证 Django核心功能组件之一,虽然也可以在前端使用JS对表单验证, 但是Django中已经为我们准备好的Form功能还算是很强大的,有时候比较适合运维,为我们简化了很多前端开发工作. Django最主要的几个功能有4个     ·  生成HTML标签     ·  验证数据(表单错误信息提示)     ·  HTML 表单保留上次提交数据     ·  初始化页面表单内容 Django的Form内容还是挺多的,我们可以从一个简单的登陆验证例子来看看Form的基本功能使用 1)新

Django基础之Form表单验证

Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from django.forms import widgets from Mybbs.models import * import re class UserForm(Form): username = fields.CharField( required=True, error_messages={'re

Django中的Form表单验证

回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错误信息的字典,并会遍历类的所有属性(对应前端待验证的输入域),调用各自的验证方法,将错误信息(两类,必要与否以及格式正确与否)存入字典,并得出最终的验证结果.在使用时,需要定义继承自Form基类不同的Form类,以对应有着不同输入域的Form表单.在拿到前端给的字典前,要先初始化自定义From类,直