前台表单数据验证

前台表单数据验证有两个方法：

第一种JS验证：

<script>function chkinput(form){var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;if(!(reg.test(form.email.value))) {alert("请输入正确的邮箱格式!");  form.email.select();return(false);}}</script><form name="form1" method="post" action="#" onSubmit="return chkinput(this)"><input type="text" name="email" size="25"><input type="submit" value="提交"></form>

验证输入是否符合邮箱格式，不符合则弹出

第二种HTML5的验证：

<form name="form1" method="post" action="#"><input type="text" name="email" size="25" required pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"><input type="submit" value="提交"></form>

只需加上pattern="xxxx"(xxx是正则表达式)和required(判断是否为空),就能有以下效果

如今主流的浏览器都支持HTML5，但像IE的某些版本不支持,所以验证是最好加上js验证

第三种Ajax无刷新验证:

验证表单数据是否在数据库中已存在,然后进行相应的提醒,目的是提高用户体验

我先输入在数据库中不存在的用户名，显示如下

再输入三个666，就变成用户名已存在了，因为数据库中已经有666666了

源码下载地址：http://yunpan.cn/cmZZqF7gninRr  访问密码 ff4d