js类似这样的表单验证

JavaScript06

js类似这样的表单验证,第1张

1、javascript校验

<input id="username" onkeyup="check()"/><span id="inf_n"></span>

<script>

function check(){

var name=document.getElementById("username").value

var sp_inf_n=document.getElementById("inf_n")

if(name){

sp_inf_n.style="color:green"

sp_inf_n.innerHTML="*√" 

}else{

    sp_inf_n.style="color:red"

sp_inf_n.innerHTML="*请输入内容!"

}

}

</script>

2、运行效果

<!--仅是简单的示例,内容正则校验和其他功能需要再进一步完善-->

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

用 button.click提交。

举例如下:

$("#form").validate()

$("#btn).click(function(){

 if($("#form").valid()){

  $("#form").submit()

}

})

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

扩展资料

query-validate 插件

基本用法:

1、页面中引入js依赖,因为validate是依赖jquery的需要先引入jquery。

2、表单校验,首先得有一个表单,即form标签,然后由于浏览器是通过name属性来提交表单数据的,所以需要给校验的控件都加上name属性。

rules里每个控件可以给多个验证方式,常用的有:

1、required 必填验证元素。

2、minlength(length) maxlength(length)。

3、rangelength(range)设置最小长度、最大长度和长度范围 [min,max]。

4、min(value) max(value) range(range) 设置最大值、最小值和值的范围。

5、email() 验证电子邮箱格式。