2 wenwuxiaojia wenwuxiaojia 于 2016.03.07 19:36 提问

请教一下已知验证方法,怎么用JavaScript实现表单的验证,并将提示信息输入到文本框后
 <script type="text/javascript">
//检查全部表单元素是否为空
     function checkBlank(Form) {
        var v=true;
        for(i=0;i<Form.length;i++){
            if(Form.elements[i].value==""){
            alert(Form.elements[i].title+"不能为空!");
            Form.elements[i].focus();
            v=false;
            return false;
            }
        }
        return v;
    }
//验证用户名是否合法
     function checkusername(username) {
         var str=username;
         //在JavaScript中,正则表达式只能以"/"开始和结束
         var Expression=/^(\w){3,20}$/;
         var objExp=new RegExp(Expression);
         return objExp.test(str);
     }
//验证密码是否合法
     function checkPWD(PWD) {
        var str=PWD;
        var Expression=/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}/;
        var objExp=new RegExp(Expression);
        return objExp.test(str);
    }
//验证Email地址是否合法
     function checkemail(email) {
        var str=email;
        var Expression=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        var objExp=new RegExp(Expression);
        return objExp.test(str);

    }

4个回答

showbo
showbo   Ds   Rxr 2016.03.07 20:39
已采纳

<form method="post" onsubmit="return checkBlank(this)">
    <input type="text" title="name" /><br />
    <input type="text" title="password" /><br /><input type="submit" value="提交" />
</form>
<script type="text/javascript">
    function showMsg(input, msg) {
        if (msg === false) {
            if(input.nextSibling.tagName=='LABEL') input.parentNode.removeChild(input.nextSibling)
        }
        else if(input.nextSibling.tagName!='LABEL') {
            var lb = document.createElement('label');
            lb.innerHTML = msg;
            input.parentNode.insertBefore(lb, input);
            input.parentNode.insertBefore(input, lb);
        }
    }
    //检查全部表单元素是否为空
    function checkBlank(Form) {
        var v = true;
        for (i = 0; i < Form.length; i++) {
            if (Form.elements[i].value == "") {
                //alert(Form.elements[i].title + "不能为空!");
                showMsg(Form.elements[i], Form.elements[i].title + '不能为空!');
                Form.elements[i].focus();
                v = false;
                return false;
            } else showMsg(Form.elements[i], false);
        }
        return v;
    }
    //验证用户名是否合法
    function checkusername(username) {
        var str = username;
        //在JavaScript中,正则表达式只能以"/"开始和结束
        var Expression = /^(\w){3,20}$/;
        var objExp = new RegExp(Expression);
        return objExp.test(str);
    }
    //验证密码是否合法
    function checkPWD(PWD) {
        var str = PWD;
        var Expression = /^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}/;
        var objExp = new RegExp(Expression);
        return objExp.test(str);
    }
    //验证Email地址是否合法
    function checkemail(email) {
        var str = email;
        var Expression = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        var objExp = new RegExp(Expression);
        return objExp.test(str);

    }
    </script>
wenwuxiaojia
wenwuxiaojia 已经解决啦,谢谢您啦
2 年多之前 回复
showbo
showbo 回复wenwuxiaojia: 我给你的代码就是了,正确是删除标签,你要显示正确自己设置正确的信息就行了。showMsg(Form.elements[i], Form.elements[i].title + '正确!');
2 年多之前 回复
wenwuxiaojia
wenwuxiaojia 请问要在文本框后面显示输出提示信息,正确或者错误,应该怎么做呀,我现在都是用的div标签逐个显示的,请问有什么简洁的方法吗?
2 年多之前 回复
wenwuxiaojia
wenwuxiaojia   2016.03.07 22:28

请问要在文本框后面显示输出提示信息,正确或者错误,应该怎么做呀,我现在都是用的div标签逐个显示的,请问有什么简洁的方法吗?

WinsenJiansbomber
WinsenJiansbomber   2016.03.08 01:31

你应该需要做一个表单管理插件,如果像上面这样一个个函数来处理表单的参数累死你.

Royal_lr
Royal_lr   Ds   Rxr 2016.03.08 10:32

就是在提交表单的时候验证就行了,,

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Javascript_06_表单验证(离开单项,输入框后提示信息)
Javascript_06_ 表单验证(离开单项,输入框后提示信息)   说明:对于必须输入的入力框,光标离开(使用 onblur方法)时进行检查。假如有错,红色的提示信息直接在该画面的这个输入框的后面显示出来,并把光标重新定向到这个输入框。   待解决问题: ①    内存泄漏问题:比如用户名没输入,离开用户名输入框时,画面上会给出提示警告信息;此时再点击密码输入框时,会导致 IE占用
用js验证输入信息,不使用alert,而使提示错误的信息直接出现在输入框后?在同一行上
在输入框后添加一个提示信息标签。比如 JS验证时,把alert部分替换。比如: alert('用户名不合法'); 替换成 document.getElementById('tipun').innerHTML = '用户名不合法';
js实现表单实时验证做出提示
本文转自[打开](http://blog.csdn.net/u012063507/article/details/62417696)对于有很多填写项目的表单,我们可能更希望在用户没有填写时或填写出错时,就即时显示提示,而不是等到提交时才进行验证。   结合js的onblur事件和style.display属性可以实现此功能。 html代码: <meta http-equiv="X-UA-Compat
JS正则表单邮箱验证实例(错误信息周时显示出来)
无标题文档 function ck_email() { var reg= /^\w+@\w+\.(com|cn|gov)$/; var str=document.getElementById("email").value; if (reg.test(str)==true){ document.getElementById("p1").innerHTML="符合规则"
输入框失去焦点时对输入信息进行JS验证
以前写的JS验证是在用户输入信息完毕后点击提交时才对输入的信息进行JS验证。 当输入框失去焦点时即对输入框中的信息进行JS验证,及时有效的反馈出验证信息,使得项目具有更良好的用户体验。 下面以一个用户注册的页面为例。 首先是form表单部分: 帐 号:    * <img style="displa
javascript完整表单验证
html> html lang="en"> head> meta http-equiv="content-type" content="text/html"; charset="UTF-8"> title>javascript完整表单验证title> script> <!-- /*function fun() {
输入信息页面js验证,提示信息
有点傻缺,没有用UI框架的验证插件。因为不想学,也想偷懒。所以写了如下的js验证。验证输入框。绑定鼠标事件:输入框失去焦点,输入框获得焦点。 获取焦点时,先进行判空处理。再对提示信息进行处理。此处想要记录的是蓝底部分($("#spanUnitId").css("display", "initial");)在谷歌浏览器是可以实现横向展示的。该语句在IE11浏览器下却不能正常执行。不知道具体原因。下
html+javascript实现表单前台验证
form.html                       function onCheck()       {         if((form1.username==null||form1.username.value=="")&&(form1.password==null||form1.password.value==""))        {        
Javascript特效之表单文本框提示信息
Javascript特效之表单文本框提示信息我们在网页上填写信息经常会需要给用户一些提醒信息,例如提醒用户身份证文本框应该填18或者15位的身份证号码。今天来看看这类提示框怎么实现。效果图:在点击文本框时就弹出提示框。实现思路其实就是在input控件焦点事件时显示出对应的对话框来提示。这个例子用到 DHTMLgoodies_formTooltip这个类来处理并引用两个类库:form-field-t...
注册表单文本框默认提示内容,选中提示消失
当我们在做一个网站的时候,经常会做登录注册功能,为了提高用户体验,我们经常会在注册框里给用户一些简单的提示。