如何在选择下拉列值的基础上在文本框中显示国家/地区代码

时间:2017-05-10 11:24:16

标签: javascript angularjs

Below code give me the error:  

facebook.htmlName =& LastName =& Email =& Password =& enterEmail =& country_name =& code =& mobile =& btn2 = faceboo ...:203指定值“+,91 “不是有效的号码。该值必须与以下正则表达式匹配: - ?(\ d + | \ d +。\ d + + |。\ d +)([eE] [ - +]?\ d +)?

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>user registration form validation using javascript with example</title>
    <script type="text/javascript">

        function selectvalue(x){

            var country_dropdown=document.getElementById("country");
            var country_Mcode=document.getElementById("country_mcode");
            if(document.getElementById("country").value=="1")
            {
                document.getElementById("country_mcode").value="+91"
            }
            if(document.getElementById("country").value=="2")
            {
                document.getElementById("country_mcode").value="+1"
            }
            if(document.getElementById("country").value=="3")
            {
                document.getElementById("country_mcode").value="+880"
            }
            if(document.getElementById("country").value=="4")
            {
                document.getElementById("country_mcode").value="+81"
            }
            if(document.getElementById("country").value=="5")
            {
                document.getElementById("country_mcode").value="+86"
            }
        }
    </script>
</head>

<body>
<div id="emptyDiv">
</div>
<div id="description"></div>
<!--container start-->
<div id="container">
    <div id="container_body">
        <div>
            <h2 class="form_title">User Registration Form Demo</h2>
            <p class="head_para">Form Validated Using Javascript</p>
        </div>
        <!--Form  start-->
        <div id="form_name">
            <div class="firstnameorlastname">
                <form name="form" >
                    <div id="errorBox"></div>
                    <input type="text" name="Name" value="" placeholder="First Name"  class="input_name" >
                    <input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >

            </div>

            <div id="email_form">
                <input type="text" name="Email" value=""  placeholder="Your Email" class="input_email">
            </div>

            <div id="password_form">
                <input type="password" name="Password" value=""  placeholder="New Password" class="input_password">
            </div>

            <div id="Re_email_form">
                <input type="text" name="enterEmail" value=""  placeholder="Re-enter Email" class="input_Re_email">
            </div>

            <!--birthday details start-->
            <div>
                <h3 class="country">Country</h3>
            </div>
            <div>
                <select name="country_name" id="country" onchange="selectvalue()">
                    <option value="" selected >Country</option>
                    <option value="1">india</option>
                    <option value="2">america</option>
                    <option value="3">Bangladesh</option>
                    <option value="4">japan</option>
                    <option value="5">china</option>
                </select>
            </div>
            <div>
                    <h3 class="country">Mobile No</h3>
            </div>
            <div>

                <input type="number" name="code" value=""  class="input_name" id="country_mcode" >
            </div>
        <div>
            <input type="number" name="mobile" value="" placeholder="Mobile No" class="input_name" >
        </div>
            <!--birthday details ends-->

        <div>
            <p id="sign_user" onClick="Submit()">Registration</p>
        </div>
        <div>
           <input type="submit" name="btn2" value="facebook registration"/>
        </div>
        <div>
            <p id="google_user" onClick="Submit()">Google Registration</p>
        </div>
        </form>
        </div>
        <!--form ends-->
    </div>
</div>
<!--container ends-->
</body>
</html>

1 个答案:

答案 0 :(得分:0)

这是因为您的输入字段是type = number而且+(加号)不能以这种方式添加。

这实际上有点奇怪,因为你可以输入+10作为例子。但后来它被解释为正10并且+被删除而不存储在value属性中。您可以更改类型或从数字中删除加号,使其成为有效数字而不是字符串。

如果您在字段中键入+10,然后使用控制台并输入document.getElementById('country_mcode')[0].value,则应该可以验证。

返回值应为10而不是+10。

编辑: 如果输入字段可以由用户设置,您可以删除类型强制执行并添加pattern="\+\d{1,5}"或类似的内容以允许您的特定用例。