使用angular.js获取form表单中的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="./node_modules/angular/angular.js"></script>
</head>
<body ng-app="s1.app">
<div>
    <div>
        <label for="ipt_name">用户名</label>
        <input ng-model="data.name" type="text" id="ipt_name">
        <span ng-bind="data.errorMsg.name"></span>
    </div>
    <div>
        <label for="ipt_password">密码</label>
        <input ng-model="data.password" type="password" id="ipt_password">
    </div>
    <div>
        <label for="ipt_age">年龄</label>
        <input ng-model="data.age" type="number" id="ipt_age">
    </div>
    <div>
        <label for="ipt_phone">手机</label>
        <input ng-model="data.phone" type="tel" id="ipt_phone">
    </div>
    <div>
        <button ng-click="actions.submit()">注册</button>
    </div>
</div>
<script>
    // app是application的缩写,application是应用程序的意思
    var app = angular.module('s1.app', []);
    app.run(function ($rootScope) {
        // data是数据的意思
        var data = $rootScope.data = {};
        data.name = '';
        data.password = '';
        data.age = 0;
        data.phone = '';
        data.errorMsg = {};

        // actions是行为的意思
        var actions = $rootScope.actions = {};
        actions.submit = function () {
            var userinfo = {};
            if(data.name == ''){
                data.errorMsg.name = '用户名不能为空';
                return;
            }
            userinfo.name = data.name;
            userinfo.password = data.password;
            userinfo.age = data.age;
            userinfo.phone = data.phone;
            // 从数据对象上拿到我们想要的数据,然后做提交(现在我们没有服务器,只是log一下)
            console.log(userinfo);
        }
    })

</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/lsy0403/p/5927990.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值