Question

我想验证我的表单，如果用户输入white space aur将该字段留空..

问题是，当我在文本框中放置空格并显示验证时，这个代码字是完美的。但是当空格为空时，它会重定向到下一页

这是我的控制器

 $scope.valid=  function (){
        var fname = $("#fname").val();
        var lname = $("#lname").val();
        var email = $("#email").val();
        var contact = $("#contact").val();


        if( fname.indexOf(" ") !== -1)
        {
            $scope.modalvalue = "Spaces are not allowed";registermodal.show();
        }
        else if( lname.indexOf(" ") !== -1){
            $scope.modalvalue = "Spaces are not allowed";registermodal.show();
        }
        else if( lname.indexOf(" ") !== -1){
            $scope.modalvalue = "Spaces are not allowed";registermodal.show();
        }
        else if( contact.indexOf(" ") !== -1){
            $scope.modalvalue = "Spaces are not allowed";registermodal.show();
        }
    }

这是我的resigter.html

   <ons-row style="margin-top:45px;text-align: center">
            <ons-col>
                <div>
                    <input class="textbox" id="fname" name="fname"     ng-model="fname" type="text" placeholder="First name" ng-trim='false' required/>
                </div>
            </ons-col>
        </ons-row>
        <ons-row style="margin-top:15px;text-align: center">
            <ons-col>
                <div>
                    <input class="textbox" id="lname" ng-model="lname" name="lname" type="text" placeholder="Last name" required/>
                </div>
            </ons-col>
        </ons-row>
        <ons-row style="margin-top:15px;text-align: center">
            <ons-col>
                <div>
                    <input class="textbox" id="email" ng-model="email" type="email" placeholder="Email" required/>
                </div>
            </ons-col>
        </ons-row>
        <ons-row style="margin-top: 15px;font-family:mai;font-size: 1.2em;text-align: center">
            <ons-col>
                <div class="">
                    <span style="padding: 10px">
                        <input id="radio1" type="radio" ng-model="gender" value="1" checked="checked"><label for="radio1">Male</label>
                    </span>
                    <span style="padding: 10px">
                        <input id="radio1" type="radio" ng-model="gender" value="2" ><label for="radio1">Female</label>
                    </span>
                </div>
            </ons-col>
        </ons-row>
        <ons-row style="margin-top:15px;text-align: center">
            <ons-col>
                <div>
                    <input class="textbox" ng-model="password" type="password" placeholder="Password" required/>
                </div>
            </ons-col>
        </ons-row>

        <ons-row style="margin-top:15px;text-align: center">
            <ons-col>
                <div>
                    <input class="textbox" id="contact" ng-model="contact" type="text" placeholder="Contact Number" required/>
                </div>
            </ons-col>
        </ons-row>

        <ons-row style="text-align:center;margin-top:10px">
            <ons-col>
                <input type="button" class="loginbutton buttoncolor" value="Register" ng-click="register() ; valid()" />
            </ons-col>
        </ons-row>

    <ons-row>
        <ons-modal var="registermodal">
            <div>{{modalvalue}}</div>
            <ons-button ng-click="showlogin1()" style="margin:20px;">Close</ons-button>
        </ons-modal>
    </ons-row>

Answer 1

为什么不试试这个简单的approche：

if( fname!= "" && fname!= " ")
    {
        $scope.modalvalue = "Spaces are not allowed";registermodal.show();
    }

并为其他textField

执行相同的操作

Answer 2

在javascript中使用trim()

if(!fname || fname.trim() == ""){
   $scope.modalvalue = "Spaces are not allowed";
   registermodal.show();
}
...

空间和空字段的javascript验证

2 个答案: